vue-蒙層彈窗里的內容滾動。外層大頁面禁止滾動

 

此需求 有兩種方法，第一種，這種方法適用於，底層 和彈窗是兩個平行的沒有關系的兩部分。重疊（https://blog.csdn.net/yuhk231/article/details/74171734）

$(".weui-mask").on("touchstart",function(ev){
            var e = ev || window.event;
            e.stopPropagation();
            e.preventDefault();
            alert(e)
     },false);

　　

 第二種，這種方法比較適用於父子集關系的頁面 中(https://blog.csdn.net/zgh0711/article/details/80368710)

 在index.html中

<script type="text/javascript">
    //解決遮罩層滾動穿透問題，分別在遮罩層彈出后和關閉前調用
    const ModalHelper = ( (bodyCls) =>{
        let scrollTop;
        return {
            afterOpen: function () {
                scrollTop = document.scrollingElement.scrollTop;
                document.body.classList.add(bodyCls);
                document.body.style.top = -scrollTop + 'px';
            },
            beforeClose: function () {
                document.body.classList.remove(bodyCls);
                // scrollTop lost after set position:fixed, restore it back.
                document.scrollingElement.scrollTop = scrollTop;
            }
        };
    })('dialog-open');
</script>

　　在全局css中

body.dialog-open {
    position: fixed;
    width: 100%;
}

　　

對話框彈出后調用

ModalHelper.afterOpen();

對話框關閉前調用

ModalHelper.beforeClose();