移动端弹出遮罩层后 禁止页面滚动

在开发移动web的时候，相信大家都会遇到当有 fixed定位遮罩层弹出时，在屏幕上滑动能够滑动背景下面的内容，这在大部分场景下都不是和友好的，解决方法如下：

1. CSS overflow:hidden
   一般这种情况如果需要阻止滚动嘴简单的方法就是弹层弹出后，给body设置样式 overflow:hidden;在弹层隐藏的同时去掉加上的css, 不过这种并不适用与body的高度刚好是页面的高度，实际下层穿透滚动的元素是在body中的其他元素。 不能完全禁止，还是会有元素可以滚动。

body{
  overflow:hidden
}

2. JS preventDefault
   监听touchmove事件并阻止默认事件

document.getElementById('mask').addEventListener('touchmove', function (event) { 
       event.preventDefault(); 
}) 

标签：body,遮罩,滚动,层后,弹层,端弹,overflow,hidden
来源： https://blog.csdn.net/weixin_42208160/article/details/111911004