出现弹窗后,父级页面还能进行滑动或滚动的问题

Posted ggdong

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了出现弹窗后,父级页面还能进行滑动或滚动的问题相关的知识,希望对你有一定的参考价值。

1.给定一个隐藏样式,如:

.noscroll 
height: 100%;
overflow: hidden;

2.点击弹窗时修改html,body的样式
$("html,body").toggleClass(‘noscroll‘);

3.页面如果出现滑动警告。如下:
[Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive. See <URL>

加个样式就可以解决:
* 
touch-action: none;

随记:
$(selector).toggleClass(class,switch)

toggleClass() 对设置或移除被选元素的一个或多个类进行切换。

该方法检查每个元素中指定的类。如果不存在则添加类,如果已设置则删除之。这就是所谓的切换效果。

不过,通过使用 "switch" 参数,您能够规定只删除或只添加类

以上是关于出现弹窗后,父级页面还能进行滑动或滚动的问题的主要内容,如果未能解决你的问题,请参考以下文章

小程序弹窗阻止滑动的两种方法

微信小程序-自制弹出框禁止页面上下滑动

谷歌浏览器打开弹窗后出现奇怪的线条,如何避免?

解决:vue 弹窗滑动 底部页面跟着滑动

vue 弹窗禁止底层滚动

easyui内的弹窗dialog不会随滚动条拖动而居中 这个怎么解决