css:touch-action致使安卓沒法滾動頁面

前言

相信你們搜css touch-action很容易搜到一批文章，但感受本身仍是須要寫下本身這這個過程當中的一些探索經歷。

之因此寫，是由於單獨去學知識點或者單獨看一篇文章其實很簡單的，難的是在本身實踐中，由於一個問題找一個方案，而後又引發另一個問題，而這個不斷髮現問題的過程很是低效，須要各類嘗試和理解。

使用css touch-action的緣由

在其官方的說明中：是否，以及以何種方式，給定的區域，能夠由用戶經過觸摸屏操做（例如，經過平移或縮放內置的瀏覽器功能）

但我最初並非由於這個來使用它的，後續會補充一篇使用這個特性作出來的效果。我用這個屬性是由於本身在使用antd-mobile的走馬燈時候，在控制檯代碼警告，內容是這樣的：

[Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive. See…
複製代碼

看到這樣的報錯，做爲程序員，職業病確定是要查看緣由的，雖然不影響正常使用。通過查閱，其簡單的描述就是這樣的：Passive event listeners，作了移動端的優化。看完一臉懵逼。其實就是是否阻止默認事件200ms延遲而後再執行滾動行爲，而以前的fastclick就是經過去掉這部分來避免點擊延遲的。

For instance, in Chrome for Android 80% of the touch events that block
scrolling never actually prevent it. 10% of these events add more than
100ms of delay to the start of scrolling, and a catastrophic delay of
at least 500ms occurs in 1% of scrolls.
複製代碼

想知道更多，能夠參考這篇，寫的比較詳細了： 移動Web滾動性能優化: Passive event listeners

而後知道緣由不夠，解決方案是什麼？

能搜到的方案是兩種，一種是經過css方式，一種是經過js的方式。 css方式：比較簡單

touch-action:none 
複製代碼

js方式：在touch的事件監聽方法上綁定第三個參數{ passive: false }

elem.addEventListener(
  'touchstart',
  fn,
  { passive: false }
);
複製代碼

使用touch-action以後，問題來了

而後固然是開心的用第一種方案把這行css寫到全局中，結果就帶來了災難。 什麼問題呢？就是ios基本均可以的，可是安卓中的頁面滾動都沒了。這是爲何呢？這個就要看下touch-action的更官方的觸摸說明了。

默認狀況下，平移（滾動）和捏手勢由瀏覽器獨佔處理。當瀏覽器開始處理觸摸手勢時，使用的應用程序Pointer_events將收到一個pointercancel事件。 經過明確指定瀏覽器應該處理哪些手勢，應用程序能夠爲其他手勢提供本身的行爲，pointermove並pointerup爲其他的手勢提供監聽器。應用程序使用Touch_events。 經過調用禁用瀏覽器處理手勢preventDefault()，但也應該使用觸摸動做來確保瀏覽器在調用任何事件偵聽器以前知道應用程序的意圖。當手勢開始時，瀏覽器將觸摸元素及其全部祖先的觸摸動做值與實現手勢的觸摸動做值（換句話說，第一個包含滾動元素）相交。 這意味着在實踐中，觸摸動做一般只應用於具備一些自定義行爲的單個元素，而不須要在該元素的任何後代上明確指定觸摸動做。手勢開始後，觸摸動做值的更改將不會對當前手勢的行爲產生任何影響。

文檔參考來源：touch-action

說人話

這段話闡明的就是觸摸事件整個的進行過程，既然它能夠經過css來約定滾動的行爲，那麼就意味着你寫了touch-action:none,就會致使原來的頁面滾動失效了。這就是安卓上沒法頁面滾動的緣由。

爲何ios沒有受影響呢，我以爲多是ios默認支持touch事件的緣由吧。若是你知道底層的緣由或者詳細的文檔說明，能夠告訴我哦。

怎麼解決呢

先臨時把對應的touch:none,全局的寫法去掉了，用了js的部分去完成或者只在控制須要的元素內進行指定這行代碼。由此也總結了幾個問題或者教訓吧。

• 在寫全局樣式的要注意影響範圍
• 在每次提交代碼的時候儘量針對不肯定的部分增長備註，風險埋點，由於此次恰好是由於用戶有反饋這個問題，我想到了是加了這行代碼的緣由，但若是是其餘時候或者過了好久，其實很難定位到是由於這行代碼的緣由。我遇到這個問題的時候，第一感受仍是是不是腳本錯誤了，是不是兼容問題。若是是這樣排查的話，就會浪費比較多的時間。甚至中間還找羣友討論，他們建議是否更換爲絕對定位的方案，那樣就真走偏了。
• 問題拿到後的冷靜分析，拿到這個問題不要過於着急，仍是要分析下產生問題的緣由，尤爲是機型，由於咱們以前作測試都是模擬器和蘋果的ios，而此次報問題的都是安卓的機型，並且是小米56，堅果，華爲等。聯想到這些安卓機型，那麼定位到多是 ：代碼兼容部分的版本太低，這些不支持；代碼某部分是對ios和安卓有區分解釋的，和系統有關，版本無關。

更多延伸與拓展

經過touch-action能夠作什麼效果呢？

• 禁止默認的滾動touch-action:none
• 能夠控制用戶行爲的處理細節，好比只接受x或者y方向的變化，來影響行爲，肯定行爲邊界
• 優化用戶屢次點擊形成界面所放
• 更多等待你的發掘

更多

說明：若是你想更好的使用滾動相關的體驗，仍是入手框架吧，否則坑太多，iscroll,better-scroll（通常滾動組件依賴的庫）.me-scroll（我的推薦）都是不錯的選擇

• 安利一篇還不錯的採坑文章: 深刻研究-webkit-overflow-scrolling