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

继续加油