解决ios移动端双滚动条导致滚动穿透问题

折月煮酒 提交于 2020-11-19 14:56:18

解决方案1

在弹出层的touchstart事件中调用preventDefault

这种方法不可取,至少有3个缺点:

  1. 如果弹出层本身是有滚动(条)的话,将会导致弹出层无法滚动,此时用这种方法无异于饮鸩止渴。

  2. 一个很常见的场景,点击弹出层,弹出层消失掉,此时也无法触发弹出层的点击回调事件。

  3. 弹出层内的任何事件都执行不了了。

 

解决方案2

此解决方案是解决方案1的升级版。

在弹出层的touchmove(注意区别)事件中调用preventDefault

这种解决办法没有了第一种解决办法的 2, 3 缺点。适用于弹出层本身有没有滚动(条)。

 

解决方案3

设置body{overflow:hidden;}

缺点:经测试,在PC上支持良好,但是在IOS端,跟没有设置是一样的,完全不起任何作用!。

这种解决方案适用于PC端。

 

解决方案4

设置 html,body{overflow:hidden;}

在PC和移动端都能禁止掉下层的滚动。

缺点:

  1. 滚动位置丢失!页面会回到顶部!

  2. 页面的背景还是能够有滚的动的效果(这个我没遇到)。

可通过js来fix这个缺点,在弹出层出现时,记录页面的scrollTop,当弹出层消失时,把先前记录的scrollTop再次赋予页面。

 

终极完美解决方案

此解决方案能够避免上述所有缺点。堪称完美。

(这个方案会导致主页面display:flex 的元素在弹框打开后消失)

css

body.dialog-open {
  position: fixed;
  width: 100%;
}

javascript

(function(){
 
   var scrollTop = 0;
 
   // 显示弹出层
   open.onclick = function(){
      
      // 在弹出层显示之前,记录当前的滚动位置
      scrollTop = getScrollTop();
        
      // 使body脱离文档流
      document.body.classList.add('dialog-open'); 
      
      // 把脱离文档流的body拉上去!否则页面会回到顶部!
      document.body.style.top = -scrollTop + 'px';
    
      mask.style.display = 'block';
   }  
 
   // 隐藏弹出层
   close.onclick = function(){
 
     mask.style.display = 'none';
     
     // body又回到了文档流中(我胡汉三又回来啦!)
     document.body.classList.remove('dialog-open');
 
     // 滚回到老地方
     to(scrollTop);
   }
 
   function to(scrollTop){
     document.body.scrollTop = document.documentElement.scrollTop = scrollTop;
   }
   function getScrollTop(){
     return document.body.scrollTop || document.documentElement.scrollTop;
   }
 
 }());

解决滚动穿透的2个工具方法:

function fixedBody(){
    var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
    document.body.style.cssText += 'position:fixed;top:-'+scrollTop+'px;';
}
 
function looseBody() {
    var body = document.body;
    body.style.position = '';
    var top = body.style.top;
    document.body.scrollTop = document.documentElement.scrollTop = -parseInt(top);
    body.style.top = '';
}

 

原文:https://blog.csdn.net/github_39570717/article/details/88181794

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!