公司最近在做微信端的商城，是嵌入公众号的那种，需求 => 原型 => UI, ok 开工。

主流程通了之后，测试开始入场，疯狂提bug，也还好，大多都是联调接口的问题，整整改改都还算顺利。

接下来就是样式问题了，ok多不废话，进入主题。

解决问题。

网上找了一圈大多都是;

overflow: hidden

页面有弹出层时将overflow: hidden样式添加到 html 上，禁用 html 和 body 的滚动条，但是这个方案移动端根本无用！！！！，pc端也有两个缺点；

1.由于 html 和 body的滚动条都被禁用，弹出层后页面的滚动位置会丢失，需要用 js 来还原。

2.页面的背景还是能够有滚的动的效果。

方案二：touchmove + preventDefault

modal.addEventListener(‘touchmove’, function(e) {

    e.preventDefault();

}, false); 

如果是vue项目在弹层最外层父容器添加属性：

@touchmove.prevent

次方案适用于你的弹层内部不需要滚动。

终极方案： position: fixed

如果只是加fixed，滚动条的位置同样会丢失。 

所以如果需要保持滚动条的位置需要用 js 保存滚动条位置关闭的时候还原滚动位置。

<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>

在需要执行的页面；

弹窗调用ModalHelper.afterOpen()； 

关闭弹窗调用ModalHelper.beforeClose()；

因为浏览器获取和设置 scrollTop 存在兼容性，为了简化上面的示例，我直接使用了 document.scrollingElement 这个新标准 ，对于不支持的浏览器可用如下 polyfill document.scrollingElement.js 。