禁止遮罩层以下屏幕滑动----正解

Posted 2020-08-05

相信大家在做移动端开发的时候会经常遇到这种场景，需要适时的弹出遮罩（有时为了突出还会在外面加上蒙层），弹窗出现以后，为了追求良好的用户体验，遮罩以下的屏幕是禁止滑动的。在网上找了很多资料，大体就这两种做法，但都有不完善的地方。加上自己的思考和总结，想到一个办法，应该可以解决你的问题。

a）大众型

一般，大家想到的都是给body或者html添加overflow：hidden样式，当然height要设置成100%。这样在大多数机型上是可以的，但有个别的就是不起作用，我也不知道为什么（求知道的大神告知）。

b）高端型

因为这种需要弹窗遮罩的一般为移动端，pc很少会出现，就算是在pc里面上面那种方法也是可以解决的，所以可以考虑从移动端特有的滑动事件touchmove下手，当弹窗出现以后阻止该事件的默认行为不就行了吗，于是又有了下面的方法。

1 $(document).on("touchmove",function(e) {
2    e.preventDefault(); 
3 })

 

这种方法在移动端是可以解决滑动的问题，但有种情景就显得有点尴尬了，移动端屏幕本来就小，如果弹窗的内容过多也需要滑动（比如很长的活动规则），因为弹窗出现的时候已经禁止了滑动事件，那可如何是好？？？？

c）改进型

在这种情形之下我想到了另外一种完美的办法，就是在禁止滑动之前先做一下判断，如果是在弹窗中触发的滑动事件就不阻止默认行为，其他地方同上。判断那部分我是通过类名判断的，通过其他的方法也是可以的（比如id），具体如下：

$(document).on("touchmove",function(e) {
   if(e.target.className.indexOf("shadeBox") >= 0) {
        e.preventDefault();      
    } 
})

上面的类名shadeBox是弹窗的蒙层的类名。也就是在蒙层上面滑动，事件是被禁止的，剩下的一部分就是弹窗了，所以弹窗的内容可以滑动。

以上有什么说的不对的，或者第三种方法还有不试用的情景的，还望指出，大家共同学习进步\(^o^)/~