根本原因是 overflow: hidden、touch-action: none 或未启用硬件加速等 CSS 设置阻断了原生触摸行为；需确保滑动容器设 touch-action: pan-x、有明确宽高、启用 GPU 加速，并将事件监听绑定到实际接收触摸的元素上。
手机 HTML 页面默认允许左右滑动，但实际项目中经常“滑不动”——根本原因不是禁止了滑动，而是 overflow: hidden、touch-action: none 或 CSS 变换未启用硬件加速等设置悄悄封住了它。
为什么 touchstart/touchmove 没反应？
常见现象：手指按下去没日志、e.touches 为空、preventDefault() 调了也没用。
- 检查根容器或滚动区域是否设置了
touch-action: none（比如某些 UI 框架重置样式会加这个） -
body或父级div若设了overflow: hidden，会阻止原生 touch 事件冒泡到子元素 - 监听必须绑定在**实际接收触摸的元素**上，不是
document—— 尤其当使用position: fixed或transform移动的图层时 - 部分安卓 WebView（如旧版 UC）需显式加
touch-action: pan-x才允许水平滑动
滑动卡顿或跳变，transform: translateX() 不跟手
核心问题在于浏览器没走合成层，每次滑动都触发 layout → paint → composite 流程。
- 给滑动容器加
will-change: transform或transform: translateZ(0)强制 GPU 加速 - 避免在
touchmove中读取offsetLeft、getBoundingClientRect()等触发回流的属性 - 用
requestAnimationFrame批量更新样式，不要在touchmove里直接改style.transform - 图片本身未设
width: 100%; height: auto;或含max-width: 100%，会导致滑动中重绘尺寸
如何让左右滑动只作用于图片容器，不拖动整个页面？
目标是：手指在图片区左右滑，页面不上下滚动；但手指在空白处仍可正常滚动页面。
- 给图片容器（如
.gallery）设touch-action: pan-x，它会接管水平滑动手势，同时放行垂直滚动 - 不要用
event.preventDefault()拦截所有 touch 事件——这会让页面完全无法滚动 - 若容器高度不足一屏，且内部无溢出，
pan-x可能无效；确保容器有明确宽高，且子项总宽度 > 容器宽度 - 在 iOS Safari 上，还需确认
viewportmeta 中没加user-scalable=no，否则会禁用所有手势
真正难的不是写滑动逻辑，而是判断哪一层该响应、哪一层该透传，以及何时该让渡控制权给原生滚动。一个没设 touch-action 的 div，和一个加了 pan-x 却没设宽高的 div，在真机上表现可能完全相反。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
