跳出弹窗页面禁止滚动 纯css

pc端如何实现

1.当弹窗显示时，为body元素添加属性：：,当关闭弹窗时移除该属性即可

2.在弹窗的div上设置@

3.前端页面弹框遮罩禁止页面滚动

lt;div@;你要显示的内容lt;;

3.出现弹窗时，为body元素添加，这样主页面就禁止滑动，同时很好地解决了弹窗穿透的问题。

若弹窗为独立组件，可以采用如下代码：

(){//获取原来的并将body的top修改为对应的值=document.body.scrollTop||document.documentElement.scrollTopthis.prevBodyStyle_top=window.getComputedStyle(document.body,null).getPropertyValue('top')document.body.style.top=`-${this.prevBodyStyle_scrollTop}px`//获取原来body的position为了解决iOS上光标漂移的问题将position修改为fixedthis.prevBodyStyle_position=window.getComputedStyle(document.body,null).getPropertyValue('position')document.body.style.position='fixed'//为了避免width空值的情况this.prevBodyStyle_width=window.getComputedStyle(document.body,null).getPropertyValue('width')document.body.style.width='100%'},beforeDestroy(){document.body.style.top=this.prevBodyStyle_top||'0px'document.body.style.position=this.prevBodyStyle_positiondocument.body.style.width=this.prevBodyStyle_width||'100%'document.body.scrollTop=document.documentElement.scrollTop=this.prevBodyStyle_scrollTop||0},

备注：如果弹窗为一个独立的组件，那么需要使用v-if来控制弹窗是否显示，不可使用v-show（因为使用v-show，会在主页面刚生成的同时生成该组件，导致position=fixed生效，在弹窗关闭的情况下页面也禁止滑动）

移动端如何实现

1.在弹窗的最外层div上添加@touchmove.stop.prevent(适合弹窗内容不需要滚动的情况下)

lt;div@touchmove.stop.preventgt;你要显示的内容lt;/divgt;

存在问题：虽然可以阻止滑动，但是双击的时候主页面还是会跳动

2.同PC端第三种方法

3.通过addEventListener解决

mounted(){document.body.addEventListener('touchmove',this.p,{passive:false})},beforeDestroy(){document.body.removeEventListener('touchmove',this.p)},methods:{p(e){e.preventDefault()e.stopPropagation()}}

划重点：addEventListener的第三个参数

{passive:false}

先说说错误的代码，网上千篇一律的都是怎么成功的，纳闷了,反正我没有成功，在手机端和chrome浏览器等依然可以正常滚屏：

document.body.addEventListener("touchstart",function(e){e.stopPropagation();e.preventDefault();},false);

错误代码为什么不行呢，而为什么使用

{passive:false}就生效了呢？

摘自MDN的解释：

passive:Boolean，表示listener永远不会调用preventDefault()。如果listener仍然调用了这个函数，客户端将会忽略它并抛出一个控制台警告。

MDN对于上述错误现象解释地很清楚：

根据规范，passive选项的默认值始终为false。但是，这引入了处理某些触摸事件（以及其他）的事件监听器在尝试处理滚动时阻止浏览器的主线程的可能性，从而导致滚动处理期间性能可能大大降低。

为防止出现此问题，某些浏览器（特别是Chrome和Firefox）已将touchstart和touchmove事件的passive选项的默认值更改为true文档级节点Window，Document和Document.body。这可以防止调用事件监听器，因此在用户滚动时无法阻止页面呈现。

varelem=document.getElementById('elem');elem.addEventListener('touchmove',functionlistener(){/*dosomething*/},{passive:true});

添加passive:true参数后，touchmove事件不会阻塞页面的滚动（同样适用于鼠标的滚轮事件）。

所以，我们可以通过将passive的值显式设置为false来覆盖此行为。

另外：您无需担心基本scroll事件的passive值。由于无法取消，因此事件监听器无法阻止页面呈现。（也是在PC端监听scroll无效的原因）

参考链接

前两种方法：https://blog.csdn.net/Chelle1...

第三种：https://blog.csdn.net/yuhk231...

vueprevent方法:https://www.cnblogs.com/Eden-...

mdn关于addEventListener:https://developer.mozilla.org...

原文地址：https://segmentfault.com/a/****17663

标签：关闭手机阻止弹出网页广告插件