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

巴特西

vue-蒙层弹窗里的内容滚动。外层大页面禁止滚动

最新文章

热门文章