移动端遮罩层滚动时，禁止底部滑动

最新推荐文章于 2021-11-15 16:38:56 发布

web_hwg

最新推荐文章于 2021-11-15 16:38:56 发布

阅读量3.6k

点赞数

分类专栏： js css 文章标签：滚动穿透移动端移动端

本文链接：https://blog.csdn.net/web_hwg/article/details/80521121

版权

js 同时被 2 个专栏收录

12 篇文章 0 订阅

订阅专栏

css

9 篇文章 0 订阅

订阅专栏

参考文章

关键css：

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

关键js:

// 解决移动端弹出层滚动穿透问题
var ModalHelper = (function(bodyCls) {
    var 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;
        }
    };
})('modal-open');