禁止遮罩下页面滑动

最近在业务中遇见一个问题，就是弹出一个蒙版，覆盖整个页面，有一部分内容固定在底部。可是底部内容还是能滑动。

我相信在蛮多场景下是需要做到蒙版的时候底部禁止滑动。尤其是手机端。这边提供几个感觉还不错的方法。

如果弹出的内容不需要滚动，直接禁止touchmove或者touchstart：

  var content = document.getElementsByTagName('body')[0];
  content.addEventListener('touchstart', function (e) {
    e.preventDefault();
}, false)
复制代码

或者：

  var content = document.getElementsByTagName('body')[0];
  content.addEventListener('touchmove', function (e) {
    e.preventDefault();
}, false)
复制代码

这两个都是禁止touch事件，在移动端有效，在PC端用滚轮滑动就禁止不了。注意，这个方法只能用在浮层不滚动的场景。

还有要注意，新版chrome在PC模式下可以，手机模式下会报错，要声明阻止滑动不是被动的：

var content = document.getElementsByTagName('body')[0];
content.addEventListener('touchstart', function (event) {
    event.preventDefault();
}, { passive: false })
复制代码

设置body的overflow，在显示遮罩的时候：

document.getElementsByTagName('body')[0].style.height = '100%';
document.getElementsByTagName('body')[0].style.overflow = 'hidden';
复制代码

隐藏遮罩的时候：

document.getElementsByTagName('body')[0].style.height = '';
document.getElementsByTagName('body')[0].style.overflow = '';
复制代码

这种方法也可以在遮罩有内容滚动的场景。不过听说兼容性不是很好。

设置body定位，在显示遮罩的时候：

document.getElementsByTagName('body')[0].style.position = 'fixed';
复制代码

隐藏遮罩的时候：

document.getElementsByTagName('body')[0].style.position = '';
复制代码

这个方法可以在遮罩内容有要滚动的时候使用。

在这边要分享一件事，就是在微信下，当你滑动的时候，透过遮罩触发了body，那么微信默认进行一个进程一样，得等一下才能滑动遮罩上面的元素。暂时没有优化的方法，当然，遮罩没有透明度不会出现。

欢迎关注Coding个人笔记 公众号

转载于:https://juejin.im/post/5c52c2d66fb9a04a06054bb4