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();