移动端在有弹出层时如何禁止底层的滚动 (实现表层滑动的时候,底层禁止滑动,表层隐藏的时候,底层依然可以滑动);
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了移动端在有弹出层时如何禁止底层的滚动 (实现表层滑动的时候,底层禁止滑动,表层隐藏的时候,底层依然可以滑动);相关的知识,希望对你有一定的参考价值。
要实现以上图示的功能;自然想到zepto里的swipeUp方法,但是用了以后发现,有的移动端浏览器,不起作用,有的浏览器起作用,但是底层也会跟着滑动;
于是加一下代码:
document.addEventListener(‘touchmove‘, function (event) {
event.preventDefault();
}, false);
加了以后上滑表层的页面,底层的页面不会跟着滚动了,但是表层页面隐藏以后,底层的页面就滑不动了;
于是下面一段代码就出现了,完美解决;
document.addEventListener(‘touchmove‘, function (event) {
if (加一个条件,就是判断表层页面出现的时候) {
event.preventDefault();
}
},false);
以上是关于移动端在有弹出层时如何禁止底层的滚动 (实现表层滑动的时候,底层禁止滑动,表层隐藏的时候,底层依然可以滑动);的主要内容,如果未能解决你的问题,请参考以下文章
vue中禁止页面滚动/滚动事件穿透-弹出蒙版时弹出层下面还可以滚动问题解决