关于touch-action:none造成手机浏览器无法滚动解决办法

犇

从网上扒了一套别人的模板，在PC浏览器和谷歌浏览器手机模拟器里都是正常的， 结果无意间用手机测试一下，只能显示一屏，不能上下左右滚动。

结果查看CSS，发现人家在全局CSS里加了一句：*｛touch-action:none｝

这段代码是做什么用？ 禁止触发默认的手势操作， 如果不加这段CSS，是可以正常滑动了，但谷歌浏览器会报一个如下的preventDefault错误， 虽然这个错误没发现什么影响，但终究看着不顺眼.

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

然后网上找了一个js的解决方案，在touch的事件监听方法上绑定第三个参数{ passive: false }

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

详细介绍请谷歌，为避免踩坑，也有很多类似框架已经解决。