移动端开发遮罩层（弹窗）防止滚动穿透解决方案

爱被打了一巴掌 2022-03-20 15:06 884阅读 1赞

在移动端页面开发中，经常会去封装一个**遮罩层（全屏弹窗），遮罩层（全屏弹窗），遮罩层（全屏弹窗）**的组件，但是如果是固定定位的position：fixed；在弹出的时候会遇到一些小坑，之前搜索了一下，网上的博客也好评论也罢，总是有点缺陷或者累赘代码太多。就比如今天的主题，如何防止**遮罩层（全屏弹窗）**下方body内容继续滚动呢？

### 移动端开发遮罩层（弹窗）防止滚动穿透完美解决方案 ###

首先，pc的肯定直接就给body设置一个overflow：hidden的属性，就完美解决了。

这没什么好说的，主要是到手机上，大家会发现给body添加的属性根本就没有任何作用，**遮罩层（全屏弹窗）**出现了该怎么滑动还是怎么滑动。

下边给出三种解决方案：

**第一种方案（参考他人的方案）：**

点击弹出的时候，给html，body均添加一个**overflow：hidden**的属性，这时候你会发现背景已经不会滚动了，但是这样做有个弊端，那就是当**遮罩层（全屏弹窗）**消失的时候，页面就会自动回到了顶部，别人浏览一个页面，点击完弹窗且消失以后就回到顶部了？显然不太合理吧。所以在你点击消失的时候要去记录一下当前的scrollTop,再赋值给当前页面的scroll，就算是解决了。这里不详细介绍写法，[推荐一个githup的作者有介绍这种方法，点击查看>>][githup]

ps:我本人觉得这种方法也能用，但是代码太多，接着看下边的解决方案

**第二种方案（适用于简单弹窗）：**

直接在**遮罩层（弹窗）**上添加@touchmove.prevent(这里是vue中)，它的作用就是当你全屏的**遮罩层（弹窗）时，就会禁止滑动，原理就是因为该弹出层都禁止滑动了，自然而然就不存在滑动穿透的问题了，是不是很简单粗暴？**我们想做的更好一点就是给body再添加一个overflow：hidden的属性，这样出了人为的手动滑动不能意外，其他工具的滑动也不能执行了（鼠标）

document.body.classList.add('overflow-hidden');

.overflow-hidden{
        overflow: hidden;
    }
    .box{
        width: 100%;
        height:100%;
        position: fixed;
        top: 0;
        background: rgba(0,0,0,0.8);
    }

**第三种方案（适用于封装组件，弹出时内容区域滚动可控制的复杂情景）：**

点击弹窗的时候，监听touchmove事件，并禁止。

点击消失的时候，监听同样的事件，remove删除。

这样做的好处是，结构中没有直接禁用滑动事件，而是通过指令进行控制，更加适合开发所需。

click(){//点击弹窗
        this.tan=true
        document.body.classList.add('overflow-hidden');
        document.addEventListener('touchmove', this.touchStart,{passive:false});//一般第三个参数可直接填false,true -> 表示在捕获阶段调用事件处理程序, false -> 表示在冒泡阶段调用事件处理程序使用，但是touchmove会被浏览器忽略掉，并不会阻止默认行为，这里通过passive:false明确声明为不是被动的
    },
    touchStart(){
        event.preventDefault();//通知 Web 浏览器不要执行与事件关联的默认动作
    },
    close(){//点击关闭弹窗
        this.tan=false
        document.body.classList.remove('overflow-hidden');
        document.removeEventListener('touchmove',this.touchStart,{passive:false});
    }

你学会了吗？帮到你的点个赞加个关注哦，不会的或者没看懂的欢迎留言。

[githup]: https://github.com/pod4g/tool/wiki/%E7%A7%BB%E5%8A%A8%E7%AB%AF%E6%BB%9A%E5%8A%A8%E7%A9%BF%E9%80%8F%E9%97%AE%E9%A2%98