遇到了一个非常奇怪的问题。首页用swiper实现了几个栏目的选项卡，然后在推荐栏，是滚动加载的瀑布流。
出现了一个问题，在移动端（PC上不会），左右滑动切换栏目的时候，swiper卡住了，如果上下滑动的时候，稍稍有一点倾斜，也会触发swiper的左右滑动，但是会滑到一半卡住！
swiper这样一个成熟的组件，不可能出现低级的bug。
那么是使用方式有问题吗？检查了swiper的使用和瀑布流相关的代码，都没发现问题。而且在PC端运行正常，那么代码应该是没问题的。
初步判断是swiper触发touch事件时，可能和scroll产生了冲突。但是这样一个成熟的组件，touch计算怎么会出错呢？而且看源码，计算还挺复杂的，如果去重写，复杂而且容易出bug。
在公司里，两个工程师看了几天这个问题，都没有头绪。
因为定位到应该是touch事件的触发问题，google到了一个CSS属性！
touch-action
CSS 属性 touch-action 用于设置触摸屏用户如何操纵元素的区域 (例如，浏览器内置的缩放功能)。 可以决定触摸屏的手势可以进行哪些操作。 比如pan-x，就是启用单指水平平移手势。即设置了这个属性的区域，只有水平平移手势能触发touch事件。
完整的规范请参考MDN：
https://developer.mozilla.org/zh-CN/docs/Web/CSS/touch-action
解决
所以，在瀑布流区域，设置touch-action:pan-y，在手机上测试，问题完美解决！
因为之前scroll或者touchmove时两个事件会冲突，导致swiper滑动卡住。
一行CSS就解决了看似复杂的问题。
标签：工程师,难倒,问题,action,CSS,touch,滑动,swiper
From： https://www.cnblogs.com/-867259206/p/18324099