阻止微信瀏覽器下拉滑動效果（ios11.3 橡皮筋效果）

cangck_X 發布于2019-08-22 15:59 / 705人閱讀

摘要：一前言瀏覽器在移動端有一個默認觸摸滾動的效果，讓我們感觸最深的莫過于微信瀏覽器里面，下拉時自帶橡皮筋的效果。二解釋微信在端和端使用的不是同樣的瀏覽器內核版微信瀏覽器瀏覽器內核相當于使用的版微信瀏覽器相當于使用的所以下面分別使用和來分析。

在升級到 ios11.3 系統后，發現之前阻止頁面滾動的代碼e.preventDefault代碼失效了。于是自己折騰了一番，找到了解決辦法，分享給大家。

一、前言

瀏覽器在移動端有一個默認觸摸滾動的效果，讓我們感觸最深的莫過于微信瀏覽器里面，下拉時自帶橡皮筋的效果。

然而在開發的時候我們經常需要阻止此效果。

在此先直接給一個方案，直接加上下面的代碼即可：

document.body.addEventListener("touchmove", function (e) {
  e.preventDefault(); //阻止默認的處理方式(阻止下拉滑動的效果)
}, {passive: false}); //passive 參數不能省略，用來兼容ios和android

如果不加passive:false,在 ios 上是不能起作用的。

二、解釋

微信在 Android 端和 IOS 端使用的不是同樣的瀏覽器內核：

Android 版微信瀏覽器：QQ瀏覽器 X5內核（相當于使用的 Chrome）

IOS 版微信瀏覽器：WKWebView（相當于使用的Safari）

所以下面分別使用 Chrome 和 Safari 來分析。

關于瀏覽器內核問題，有興趣的可以看看這個：瀏覽器內核總結

1. Chrome 默認的事件監聽參數：

useCapture:false 表示事件采用冒泡機制（capture 譯為捕獲），瀏覽器默認就是false；
passive:false 表示我現在主動告訴瀏覽器該監聽器將使用e.preventDefault()來阻止瀏覽器默認的滾動行為（可以提高運行速度）。

2. Safari 默認的事件監聽參數：

在 Safari 中，有一個更新：

Updated root document touch event listeners to use passive mode improving scrolling performance and reducing crashes
更新了根文檔觸摸事件偵聽器，默認使用passive:true提高滾動性能并減少崩潰

所以Safari 中默認使用了passive:true，告訴瀏覽器，此監聽事件中，不會阻止默認的頁面滾動。這將導致設置的e.preventDefault()代碼失效。

所以 Safari 默認是不會阻止滾動的。

3. 結論

我們通過 e.preventDefault(); 阻止默認的下拉滑動的效果，通過添加 passive:false 參數來兼容各個瀏覽器。即可實現阻止移動頁面滾動的功能。

三、關于 passive 參數

關于 passive 在事件監聽中的作用，推薦大家看這篇文章：passive 的事件監聽器

GPU云服務器云服務器 IOS滑動抽屜效果滑動效果 php下拉加載效果 html下拉刷新效果

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/93931.html

微信里面防止下拉"露底"組件

摘要：從本人這兩個月移動實踐的經驗來看，微信的里面和的滑動效果無論是在安卓還是下的體驗都很一般，有明顯的卡頓現象，在安卓下面還會出現滑動過快的時候在頁面停下來之后滾動條才閃到相應位置的現象。前言在微信里面瀏覽頁面的時候，有一個很管用的方法可以區分這個頁面是原生的還是H5形式的。隨便打開一個頁面，用力往下扯的時候，如果頁面上方出現了黑底，黑底上有一行諸如網頁由game.weixin.qq....

hot_pot_Leo 2019-08-21 10:41 評論0 收藏0
vue結合preventDefault()和頁面滾動高度計算，解決ios橡皮筋效果

摘要：第一種方法我嘗試了，覺得不是很好用，而且頁面的滑動變得卡頓，橡皮筋效果還是時而出現，因此考慮第二種辦法。由上面的定義可知，當頁面滑動到頂部時，為，當頁面出現橡皮筋時，小于當頁面滑動到底部時，。感謝的啟發，方法很有用！好幾個月以前，我寫了一個類似于自動回復那種的客服頁面，嵌入到公司開發的app里。上周測試突然找到我，說頁面在滑動的時候，輸入框也會跟著上下滑動，而這個...

JerryWangSAP 2019-08-23 14:09 評論0 收藏0
手機端頁面在項目中遇到的一些問題及解決辦法（持續更新）

摘要：解決頁面使用在上滑動卡頓的問題首先你可能會給頁面的和增加了然后就可能造成上頁面滑動的卡頓問題。頁面橡皮彈回效果遮擋頁面選項卡有時和的去除掉問題可能就沒有了。該行無文字時，光標高度與的一致。 1.解決頁面使用overflow: scroll在iOS上滑動卡頓的問題? 首先你可能會給頁面的html和body增加了height: 100%, 然后就可能造成IOS上頁面滑動的卡頓問題。解決方案...

teren 2019-08-29 15:36 評論0 收藏0
手機端頁面在項目中遇到的一些問題及解決辦法（持續更新）

摘要：解決頁面使用在上滑動卡頓的問題首先你可能會給頁面的和增加了然后就可能造成上頁面滑動的卡頓問題。頁面橡皮彈回效果遮擋頁面選項卡有時和的去除掉問題可能就沒有了。該行無文字時，光標高度與的一致。 1.解決頁面使用overflow: scroll在iOS上滑動卡頓的問題? 首先你可能會給頁面的html和body增加了height: 100%, 然后就可能造成IOS上頁面滑動的卡頓問題。解決方案...

wyk1184 2019-08-26 11:59 評論0 收藏0