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

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

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

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

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

下边给出三种解决方案:

第一种方案(参考他人的方案):

点击弹出的时候,给html,body均添加一个overflow:hidden的属性,这时候你会发现背景已经不会滚动了,但是这样做有个弊端,那就是当遮罩层(全屏弹窗)消失的时候,页面就会自动回到了顶部,别人浏览一个页面,点击完弹窗且消失以后就回到顶部了?显然不太合理吧。所以在你点击消失的时候要去记录一下当前的scrollTop,再赋值给当前页面的scroll,就算是解决了。这里不详细介绍写法,推荐一个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});
}

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

你可能感兴趣的:(javascript插件,vue学习)