公司最近在做微信端的商城，是嵌入公众号的那种，需求 => 原型 => 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 。
