<strong>下面是一个手机APP页面，分成上中下三部分，最上面和最下面是固定的，中间可以滚动。这是常见的APP布局方式。</strong> |
<style> .box{ overflow: auto; -webkit-overflow-scrolling: touch; /*使得div内的超出滑动具有惯性，阻尼回弹等特性,否则滑动很生涩*/}</style></head> <body class="box" > <div id="top" class="scroll1" ></div> <div class="scroll" > <div > </div> <div > </div> <div > </div> <div > </div> </div> <div id="bottom" class="scroll1" ></div> |
| 1 | <span >运行效果如下，顶部和底部固定区域都是黄色，中间的滚动div包含了红灰相间的色块。<br><img alt="" src="https://img2018.cnblogs.com/blog/1334688/201810/1334688-20181014180728971-1597704554.png"><br><br></span> |
| 1 | <span ><br>在ios测试时发现基本正常，可是有以下几个问题：</span> |
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();
});