css:touch-action導致安卓無法滾動頁面

前言

 

2020新年的第一篇問題 其實也不是第一次遇到這個問題，

主要是在vue 項目里面應用 factclick ，

一個報錯紅色警告：

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

做了移動端的優化。看完一臉懵逼。其實就是是否阻止默認事件200ms延遲然后再執行滾動行為

但是這個factclick  就是避免延遲的，

解決方案是什么？

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

touch-action:none 

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

elem.addEventListener(
  'touchstart',
  fn,
  { passive: false }
);

使用touch-action之后，有新的問題啦, 刺激啊

第一種方案把這行css寫到全局中，結果就帶來了災難。 什么問題呢？

就是ios基本都可以的，但是安卓中的頁面滾動都沒了。這是為什么呢？

這個就要看下touch-action的更官方的觸摸說明了。

 

這個是官網 https://cloud.tencent.com/developer/section/1072256

解決方法

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

 

但是 有人說;

設置成touch-action: manipulation;

解決300ms延遲-只允許進行滾動和持續縮放操作，這樣就不會滾動不了了。

 

我親自體驗試了，可以的 OK 能用css 解決的問題堅決不用 js

 

繼續加油