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

 

 

在升級到 ios11.3 系統後，發現以前阻止頁面滾動的代碼e.preventDefault代碼失效了。因而本身折騰了一番，找到了解決辦法，分享給你們。

1、前言

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

然而在開發的時候咱們常常須要阻止此效果。

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

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

若是不加passive:false,在 ios 上是不能起做用的。

2、解釋

微信在 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 參數來兼容各個瀏覽器。便可實現阻止移動頁面滾動的功能。

3、關於 passive 參數

關於 passive 在事件監聽中的做用，推薦你們看這篇文章：passive 的事件監聽器