一行CSS解决难倒工程师两天的问题!
遇到了一个非常奇怪的问题。首页用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:
解决
所以,在瀑布流区域,设置touch-action:pan-y,在手机上测试,问题完美解决!
因为之前scroll或者touchmove时两个事件会冲突,导致swiper滑动卡住。
一行CSS就解决了看似复杂的问题。