微信瀏覽器禁止下拉彈性效果

在做公司手機端官網時，在微信瀏覽器打開時，出現下圖這種情況：微信瀏覽器出現自帶的下拉彈性效果，導致自己寫的下拉刷新功能出現問題。

 

為了解決這個問題，網上提供的解決方法基本是：

或者：

這是很暴力的做法，雖然是把下拉彈性效果禁止了，可是也把頁面里的滾動條禁止了，導致網頁不能滾屏。

經過了解。微信下拉彈性效果其實是瀏覽器本身的一種特性。

而下拉回彈是touchmove事件的一種默認屬性，根據這個，只要禁止瀏覽器最底層box（也就是body）的touchmove事件，就不會回彈了，於是乎就有了上面那種只圖一時之快不負責的代碼。

既然touchmove事件不能禁用，但有時又不能生效，於是筆者想到一種方法 ，如果頁面滾動條在最頂部的時候，禁止下拉，反之允許下拉，這個問題不就順利解決啦？於是乎有了下面代碼：

/**

  * 禁止瀏覽器下拉回彈

  */

function  stopDrop() {

     var  lastY; //最后一次y坐標點

     $(document.body).on( 'touchstart' ,  function (event) {

         lastY = event.originalEvent.changedTouches[0].clientY; //點擊屏幕時記錄最后一次Y度坐標。

     });

     $(document.body).on( 'touchmove' ,  function (event) {

         var  y = event.originalEvent.changedTouches[0].clientY;

         var  st = $( this ).scrollTop();  //滾動條高度  

         if  (y >= lastY && st <= 10) { //如果滾動條高度小於0，可以理解為到頂了，且是下拉情況下，阻止touchmove事件。

             lastY = y;

             event.preventDefault();

         }

         lastY = y;

 

     });

}

只需要在網頁加載完后立即執行此函數，就可以較完美地實現阻止網頁回彈。當然，只是較完美，還不是完美。因為我發現，當網頁進入出現下拉回彈效果時，手指不放開再往下拉，坑爹地這時候竟然不是touchmove事件了，而是沒有事件！

好吧，瀏覽器設計者深埋雷，我們就邊踩邊挖吧，各前端狗們，大家共勉！