禁止遮罩下页面滑动
最近在业务中遇见一个问题，就是弹出一个蒙版，覆盖整个页面，有一部分内容固定在底部。可是底部内容还是能滑动。
我相信在蛮多场景下是需要做到蒙版的时候底部禁止滑动。尤其是手机端。这边提供几个感觉还不错的方法。
如果弹出的内容不需要滚动，直接禁止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，那么微信默认进行一个进程一样，得等一下才能滑动遮罩上面的元素。暂时没有优化的方法，当然，遮罩没有透明度不会出现。
（完）
本文参与 腾讯云自媒体同步曝光计划，分享自微信公众号。
原始发表：2018-09-11，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
