移动端遮罩打开，禁止滑动穿透问题解决

禁止滑动穿透

一般开始我们都会想到，当弹窗触发时，给body元素，添加css属性

// css 部分
modal_open {
    position: fixed;
    height: 100%;
}

// js 部分
document.body.classList.add('modal_open');
document.body.classList.remove('modal_open');

虽然说上面这个方法轻松的解决了滚动穿透问题，却也遗留着其他问题。

当内容超过100%，可以发生滚动，滚动的位置会丢失，关闭弹窗时无法回到滚动的位置，会被重置到顶部。

知道问题，我们可以得出解决方案，记录滚动的位置，并设置top到scroll的位置，关闭弹窗，让内容回到我们滚动到的位置，保持不动。来看看下面的解决方案：

// css 部分 .modal_open { 
  position: fixed; 
}

只设置 fixed 就足够了，添加了 height: 100%;会导致，滚动超过100%的内容只会显示百分比， 其他内容会被 overflow

var ModalHelper = (function(bodyClass) { 
    var scrollTop;
    return { 
        afterOpen: function() { 
            scrollTop = document.scrollingElement.scrollTop  ||
                        document.documentElement.scrollTop || 
                        document.body.scrollTop;
            document.body.classList.add(bodyClass);
            document.body.style.top = -scrollTop + 'px';
        },
        beforeClose: function() { 
            document.body.classList.remove(bodyClass);
            document.scrollingElement.scrollTop = document.documentElement.scrollTop = document.body.scrollTop = scrollTop;
        }
    };
})('modal_open');

const openBtn = document.getElementById("open-btn"); // 打开
const closeBtn = document.getElementById("close-btn"); // 关闭
openBtn.addEventListener("click", e => {  
       ModalHelper.afterOpen()
});
closeBtn.addEventListener("click", e => {  
       ModalHelper.beforeClose()
});

原文链接：https://blog.csdn.net/weixin_42164539/article/details/116006194

本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。