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

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