必须显式在可滑动容器上设置touch-action: pan-x或pan-y，否则浏览器默认300ms延迟判断导致“一碰没反应”；父级touch-action会阻断子级，按钮需单独设manipulation，pinch-zoom单独使用等同于禁用所有平移。
touch-action: pan-x/pan-y 必须显式写在可滑动容器上
轮播图、时间轴、横向列表这类单向滑动区域，不能只靠 overflow-x: auto 或 JS 滚动库就指望手势跟手。浏览器默认 touch-action: auto，会先等 300ms 判断用户是点还是拖——结果就是“一碰没反应，再推才动”。touch-action: pan-x（横向）或 touch-action: pan-y（纵向）才是明确告诉浏览器：“这里只允许这个方向滚动，别犹豫”。
常见错误：
- 给父容器设了
touch-action: pan-x，但子项用了transform: translateX()却没加该属性，部分 Android WebView 仍会降级判断 - 用
scroll-snap-type实现轮播时，忘了在滚动容器上加touch-action: pan-x，首屏滑动卡顿明显 - 写了
touch-action: pan-x pan-y，但实际只支持横向滑动，多写的pan-y可能导致误触发垂直偏移
为什么加了 pan-x 还是滑不动？检查父级是否覆盖
touch-action 不继承，但会被父容器的声明直接阻断。比如地图组件外层用了 touch-action: none（常见于某些 UI 框架的 .map-container），里面嵌套的横向时间轴就算写了 pan-x 也无效。
真机调试时，在 Elements 面板选中滑动容器，看 Computed 样式里 touch-action 的最终值是不是 pan-x。如果不是，按以下顺序排查：
- 父元素是否有
touch-action: none或auto（尤其注意模态框、弹层 wrapper） - 是否有更高权重的全局规则，比如第三方 CSS 里的
* { touch-action: auto } - 是否用了
position: fixed+transform组合，某些旧版 Android WebView 会忽略声明
pinch-zoom 单独使用等于禁用所有平移
想保留缩放但禁用双击，不能只写 touch-action: pinch-zoom。这是个常见误解：pinch-zoom 本身不隐含平移权限，单独使用等同于 none，会导致整个容器点不动、滑不了。
正确写法是显式组合：
- 横向轮播 + 双指缩放：
touch-action: pan-x pinch-zoom - 图片查看器（支持任意方向拖拽+缩放）：
touch-action: pan-x pan-y pinch-zoom - 仅禁止缩放、保留滚动：
touch-action: pan-x pan-y（不用写pinch-zoom: none，它本来就不存在）
注意：iOS Safari 对 pinch-zoom 支持稳定，但部分 Android WebView（如 UC 13.x）仍返回空字符串，需 fallback 到 JS 监听 touchmove 并 e.preventDefault()。
滑动容器里嵌按钮，得单独处理点击
横向滚动区域内的操作按钮（如轮播指示点、删除图标），既需要响应点击，又不能干扰滑动——这时不能全靠父容器的 pan-x 兜底。
必须对按钮本身加 touch-action: manipulation，否则 iOS Safari 在滑动过程中轻点按钮，大概率触发滑动而非 click。
关键细节：
- 按钮要是语义化元素（
<button></button>或带role="button"的<div>），否则 <code>manipulation无效 - 避免同时监听
touchstart和touchmove，哪怕只做日志打印，某些 iOS 版本也会强制回退到 300ms 判断 - 若按钮在滚动中动态插入（如 SPA 轮播切换后新增），需 JS 补上样式或 class，CSS 规则不会自动生效
最易被忽略的一点：滑动容器设了 touch-action: pan-x 后，内部按钮的 manipulation 声明必须比父级规则权重更高，否则会被覆盖——用类选择器比元素选择器更稳妥。
