移动端在有弹出层时如何禁止底层的滚动 (实现表层滑动的时候,底层禁止滑动,表层隐藏的时候,底层依然可以滑动);

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了移动端在有弹出层时如何禁止底层的滚动 (实现表层滑动的时候,底层禁止滑动,表层隐藏的时候,底层依然可以滑动);相关的知识,希望对你有一定的参考价值。

技术分享技术分享

要实现以上图示的功能;自然想到zepto里的swipeUp方法,但是用了以后发现,有的移动端浏览器,不起作用,有的浏览器起作用,但是底层也会跟着滑动;

于是加一下代码:

document.addEventListener(‘touchmove‘, function (event) {
       event.preventDefault();
     }, false);

加了以后上滑表层的页面,底层的页面不会跟着滚动了,但是表层页面隐藏以后,底层的页面就滑不动了;

于是下面一段代码就出现了,完美解决;

   document.addEventListener(‘touchmove‘, function (event) {
         if (加一个条件,就是判断表层页面出现的时候) {
             event.preventDefault();
         }
     },false);

 

以上是关于移动端在有弹出层时如何禁止底层的滚动 (实现表层滑动的时候,底层禁止滑动,表层隐藏的时候,底层依然可以滑动);的主要内容,如果未能解决你的问题,请参考以下文章

vue中禁止页面滚动/滚动事件穿透-弹出蒙版时弹出层下面还可以滚动问题解决

弹出层完美禁止页面滚动

移动端弹出层加遮罩后禁止滑动

关于移动端js弹出层滚动的时候 body层不可滚动的解决办法

解决移动端弹窗滚动事件触发主页面滚动事件

移动端当弹出层显示,阻止body的滑动