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

在开发移动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(); 
}) 

你可能感兴趣的:(移动端弹出遮罩层后 禁止页面滚动)