在移动端页面开发中,经常会去封装一个遮罩层(全屏弹窗),遮罩层(全屏弹窗),遮罩层(全屏弹窗)的组件,但是如果是固定定位的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});}
你学会了吗?帮到你的点个赞加个关注哦,不会的或者没看懂的欢迎留言。