在移动端页面开发中，经常会去封装一个遮罩层（全屏弹窗），遮罩层（全屏弹窗），遮罩层（全屏弹窗）的组件，但是如果是固定定位的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=truedocument.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=falsedocument.body.classList.remove('overflow-hidden');document.removeEventListener('touchmove',this.touchStart,{passive:false});}
你学会了吗？帮到你的点个赞加个关注哦，不会的或者没看懂的欢迎留言。
