禁止遮罩下页面滑动

禁止遮罩下页面滑动

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

 

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

 

如果弹出的内容不需要滚动,直接禁止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 个人笔记

来源:coding个人笔记,本文观点不代表自营销立场,网址:https://www.zyxiao.com/p/70299

发表评论

电子邮件地址不会被公开。 必填项已用*标注

侵权联系
分享本页
返回顶部