ios 下防止整個網頁滑動(阻尼回彈 . 瞞天過海,騙IOS，把阻尼回彈限制在滾動區div內
摘要：
<strong>下面是一個手機APP頁面，分成上中下三部分，最上面和最下面是固定的，中間可以滾動。這是常見的APP佈局方式。</strong>
<style>
.box{
overflow: auto;
-webkit-overflo...
<strong>下面是一個手機APP頁面，分成上中下三部分，最上面和最下面是固定的，中間可以滾動。這是常見的APP佈局方式。</strong>
<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();
});