移動端iOS阻止橡皮筋效果

一、遇到的問題

移動端開發中，iOS的微信瀏覽器也好、Safari也好在瀏覽網頁的時候會出現橡皮筋效果。就是當頁面拉到盡頭的時候還能再繼續拉動，露出瀏覽器的底色，松手會回彈回去。
微信瀏覽器：

Safari：

只有iOS有這個效果，android沒有這個問題。

二、解決辦法

首先想到event.preventDefault();但是如果直接添加到body上，整個頁面就不會滾動了。機智的你立刻想到，只有到達臨界值的時候在阻止事件默認行為不就行啦！是這樣的，我們只需要判斷，頁面是否滾動到了頂端和底部即可。

var startY,endY;
//記錄手指觸摸的起點坐標
$('body').on('touchstart',function (e) {
     startY = e.touches[0].pageY;
});
$('body').on('touchmove',function (e) {
     endY = e.touches[0].pageY;  //記錄手指觸摸的移動中的坐標
     //手指下滑，頁面到達頂端不能繼續下滑
     if(endY>startY&& $(window).scrollTop()<=0){
         e.preventDefault();
     }
   //手指上滑，頁面到達底部能繼續上滑
     if(endY<startY&& $(window).scrollTop()+ 
         $(window).height()>=$('body')[0].scrollHeight){
         e.preventDefault();
     }
})

有同學可能會問，直接判斷是否到達頁面頂部或者底部阻止不行默認行為不就行了？還判斷上滑下滑這么麻煩干什么？
這是因為，如果按照你的方案來，當你到達底部的時候，手指不論做什么方向的滑動都會被阻止默認行為，這個時候你往上滑也會被阻止的，所以頁面又不能動了！！！這就和你直接在body上添加event.preventDefault();頁面不能滾動是一個道理了。