移动端在有弹出层时如何禁止底层的滚动

Posted 2023-04-24

参考技术A 众所周知，移动端当有 fixed 遮罩背景和弹出层时，在屏幕上滑动能够滑动背景下面的内容，这就是臭名昭著的滚动穿透问题

页面弹出层上将 .modal-open 添加到 html 上，禁用 html 和 body 的滚动条
但是这个方案有两个缺点：

如果只是上面的 css，滚动条的位置同样会丢失，所以如果需要保持滚动条的位置需要用 js 保存滚动条位置关闭的时候还原滚动位置

移动端在有弹出层时如何禁止底层的滚动 （实现表层滑动的时候，底层禁止滑动，表层隐藏的时候，底层依然可以滑动）；

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

于是加一下代码:

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

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

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

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