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

发布日期:2019-01-26

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

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

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

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

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

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

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

问题12其实是一个问题,解决原理如下:

当滚动区滚到顶部时,手再触屏时,把把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() })