解决问题。
网上找了一圈大多都是;
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 。
来源：CSDN
作者：易之晓晓
链接：https://blog.csdn.net/qq_42306443/article/details/103609652