ios 下防止整个网页滑动(阻尼回弹 . 瞒天过海,骗IOS，把阻尼回弹限制在滚动区div内

程序员文章站 2022-06-24 22:04:57

1.当滚动到底部（稍停几秒），再上拉的时候，整个网页就会上滑，松手后阻尼回弹。 2.当滚动到顶部（稍微停几秒），再下拉时，整个网页就下滑，松手后阻尼回弹。 3.上在顶部或底部上下滑动时，整个页面会上下滑动。松手后立即滑动中间区域，也是上下滑动（停留秒后再滑，则正常滑动中间区域）问题1,2其实是一个 ......

下面是一个手机app页面，分成上中下三部分，最上面和最下面是固定的，中间可以滚动。这是常见的app布局方式。

<style> 
.box{
  overflow: auto;
  -webkit-overflow-scrolling: touch;  /*使得div内的超出滑动具有惯性，阻尼回弹等特性,否则滑动很生涩*/
}
</style>
</head>
 
<body class="box" >
     <div id="top" class="scroll1" style="height:50px;"></div>
  
 <div class="scroll" style="height:calc( 100% - 100px);width:100%;overflow:auto;">
     <div style="height:500px;width:100%;"> 
     </div> 
      <div style="height:500px;margin-top:200px; "> 
     </div> 
     <div style="height:500px;margin-top:200px; "> 
     </div> 
      <div style="height:500px;margin-top:200px; ">

     </div>
 </div>
  <div id="bottom" class="scroll1" style="height:50px;"></div>

运行效果如下，顶部和底部固定区域都是黄色，中间的滚动div包含了红灰相间的色块。


在ios测试时发现基本正常，可是有以下几个问题：

1.当滚动到底部（稍停几秒），再上拉的时候，整个网页就会上滑，松手后阻尼回弹。

2.当滚动到顶部（稍微停几秒），再下拉时，整个网页就下滑，松手后阻尼回弹。

3.上在顶部或底部上下滑动时，整个页面会上下滑动。松手后立即滑动中间区域，也是上下滑动（停留秒后再滑，则正常滑动中间区域）

问题1,2其实是一个问题，解决原理如下：

当滚动区滚到顶部时，手再触屏时，把把div的滚动位置向下调一点点，这样系统就会以为还没有滚到头，就会继续滑动，然后是div内的阻尼滑动，整个网页不会滑动。滚动到底部时，再触屏时，同理向上调一点。这一招欺骗手法瞒天过海把ios骗过去了。代码如下：

    var overscroll = function(el) {
    el.addeventlistener('touchstart', function() {
        var top = el.scrolltop
        ,totalscroll = el.scrollheight
        ,currentscroll = top + el.offsetheight; 
        if(top === 0) {
            el.scrolltop = 1;
        }else if(currentscroll === totalscroll) {
            el.scrolltop = top - 1;
        } 
    }); 
} 
 overscroll(document.queryselector('.scroll'));

问题3，更简单，直接忽略滚动事件即可：

document.all.bottom.addeventlistener('touchmove', function(evt) { 
evt.preventdefault(); 
});

document.all.top.addeventlistener('touchmove', function(evt) { 
evt.preventdefault(); 
});

上一篇： Mysql数据库中关于数字排序问题讲解

下一篇：为孩子收藏十二种有助于长高的运动