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

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

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

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

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

下边给出三种解决方案：

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

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

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

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

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

<div class="box" v-if="tan" @click="close" @touchmove.prevent></div>

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});
}

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