ios 下防止整個網頁滑動(阻尼回彈 . 瞞天過海,騙IOS，把阻尼回彈限制在滾動區div內
阿新 • • 發佈：2018-10-14
list ont 16px 一點 width sta 常見 沒有 手機app
下面是一個手機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(); });
ios 下防止整個網頁滑動(阻尼回彈 . 瞞天過海,騙IOS，把阻尼回彈限制在滾動區div內