資訊專欄INFORMATION COLUMN
摘要：一前言瀏覽器在移動端有一個默認(rèn)觸摸滾動的效果，讓我們感觸最深的莫過于微信瀏覽器里面，下拉時自帶橡皮筋的效果。二解釋微信在端和端使用的不是同樣的瀏覽器內(nèi)核版微信瀏覽器瀏覽器內(nèi)核相當(dāng)于使用的版微信瀏覽器相當(dāng)于使用的所以下面分別使用和來分析。
在升級到 ios11.3 系統(tǒng)后，發(fā)現(xiàn)之前阻止頁面滾動的代碼e.preventDefault代碼失效了。于是自己折騰了一番，找到了解決辦法，分享給大家。
一、前言瀏覽器在移動端有一個默認(rèn)觸摸滾動的效果，讓我們感觸最深的莫過于微信瀏覽器里面，下拉時自帶橡皮筋的效果。
然而在開發(fā)的時候我們經(jīng)常需要阻止此效果。
在此先直接給一個方案，直接加上下面的代碼即可：
document.body.addEventListener("touchmove", function (e) {
e.preventDefault(); //阻止默認(rèn)的處理方式(阻止下拉滑動的效果)
}, {passive: false}); //passive 參數(shù)不能省略，用來兼容ios和android
如果不加passive:false,在 ios 上是不能起作用的。
二、解釋微信在 Android 端和 IOS 端使用的不是同樣的瀏覽器內(nèi)核：
Android 版 微信瀏覽器 ：QQ瀏覽器 X5內(nèi)核（相當(dāng)于使用的 Chrome）
IOS 版 微信瀏覽器 ：WKWebView（相當(dāng)于使用的Safari）
所以下面分別使用 Chrome 和 Safari 來分析。
關(guān)于瀏覽器內(nèi)核問題，有興趣的可以看看這個：瀏覽器內(nèi)核總結(jié)1. Chrome 默認(rèn)的事件監(jiān)聽參數(shù)：
useCapture:false 表示事件采用冒泡機(jī)制（capture 譯為 捕獲），瀏覽器默認(rèn)就是false；
passive:false 表示我現(xiàn)在主動告訴瀏覽器該監(jiān)聽器將使用e.preventDefault()來阻止瀏覽器默認(rèn)的滾動行為（可以提高運(yùn)行速度）。
在 Safari 中，有一個更新：
Updated root document touch event listeners to use passive mode improving scrolling performance and reducing crashes
更新了根文檔觸摸事件偵聽器，默認(rèn)使用passive:true提高滾動性能并減少崩潰
所以Safari 中默認(rèn)使用了passive:true，告訴瀏覽器，此監(jiān)聽事件中，不會阻止默認(rèn)的頁面滾動。這將導(dǎo)致設(shè)置的e.preventDefault()代碼失效。
所以 Safari 默認(rèn)是不會阻止?jié)L動的。
3. 結(jié)論我們通過 e.preventDefault(); 阻止默認(rèn)的下拉滑動的效果，通過添加 passive:false 參數(shù)來兼容各個瀏覽器。即可實現(xiàn)阻止移動頁面滾動的功能。
三、關(guān)于 passive 參數(shù)關(guān)于 passive 在事件監(jiān)聽中的作用，推薦大家看這篇文章：passive 的事件監(jiān)聽器
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/93931.html
摘要：從本人這兩個月移動實踐的經(jīng)驗來看，微信的里面和的滑動效果無論是在安卓還是下的體驗都很一般，有明顯的卡頓現(xiàn)象，在安卓下面還會出現(xiàn)滑動過快的時候在頁面停下來之后滾動條才閃到相應(yīng)位置的現(xiàn)象。 前言 在微信里面瀏覽頁面的時候，有一個很管用的方法可以區(qū)分這個頁面是原生的還是H5形式的。隨便打開一個頁面，用力往下扯的時候，如果頁面上方出現(xiàn)了黑底，黑底上有一行諸如網(wǎng)頁由game.weixin.qq....
摘要：第一種方法我嘗試了，覺得不是很好用，而且頁面的滑動變得卡頓，橡皮筋效果還是時而出現(xiàn)，因此考慮第二種辦法。由上面的定義可知，當(dāng)頁面滑動到頂部時，為，當(dāng)頁面出現(xiàn)橡皮筋時，小于當(dāng)頁面滑動到底部時，。 感謝的啟發(fā)，方法很有用！ 好幾個月以前，我寫了一個類似于自動回復(fù)那種的客服頁面，嵌入到公司開發(fā)的app里。上周測試突然找到我，說 頁面在滑動的時候，輸入框也會跟著上下滑動，而這個...
摘要：解決頁面使用在上滑動卡頓的問題首先你可能會給頁面的和增加了然后就可能造成上頁面滑動的卡頓問題。頁面橡皮彈回效果遮擋頁面選項卡有時和的去除掉問題可能就沒有了。該行無文字時，光標(biāo)高度與的一致。 1.解決頁面使用overflow: scroll在iOS上滑動卡頓的問題? 首先你可能會給頁面的html和body增加了height: 100%, 然后就可能造成IOS上頁面滑動的卡頓問題。解決方案...
摘要：解決頁面使用在上滑動卡頓的問題首先你可能會給頁面的和增加了然后就可能造成上頁面滑動的卡頓問題。頁面橡皮彈回效果遮擋頁面選項卡有時和的去除掉問題可能就沒有了。該行無文字時，光標(biāo)高度與的一致。 1.解決頁面使用overflow: scroll在iOS上滑動卡頓的問題? 首先你可能會給頁面的html和body增加了height: 100%, 然后就可能造成IOS上頁面滑動的卡頓問題。解決方案...
閱讀 2000·2023-04-26 01:41
閱讀 2499·2021-11-24 09:39
閱讀 1937·2021-11-24 09:38
閱讀 1965·2021-11-19 09:40
閱讀 3786·2021-11-11 11:02
閱讀 3308·2021-10-20 13:48
閱讀 3192·2021-10-14 09:43
閱讀 4425·2021-09-02 15:11
