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

在开发移动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(); 
}) 
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,790评论 1 92
  • mobileHack 这里收集了许多移动端上遇到的各种坑与相对解决方案 工具类网站 HTML5 与 CSS3 技术...
    安石0阅读 1,916评论 0 5
  • 有人说,自从自己生了孩子,就好似从此有了一个甜蜜的“包袱”。 Ta能给我们温暖,能净化我们的心灵,能给予我们无限的...
    瞧那一家子阅读 193评论 0 0
  • 自pressone这一大轮ico之后,我对区块链的关注暂停了一段时间,其中主要是我大部分子弹都用在了presson...
    Wilbur_阅读 521评论 0 0