overflow: scroll 在移动端无法被手势库捕获，因浏览器底层优化直接吞掉触摸事件；需同时满足 touch-action: none、overflow: hidden 和手动滚动实现才能稳定接管手势。
HTML 默认的滑动（比如 overflow: scroll）在移动端**不触发原生手势事件**，也不自动兼容 touchstart/touchmove 等手势识别逻辑——你监听不到“滑动开始”或“滑动方向”，更没法阻止默认滚动行为来接管手势。
为什么 overflow: scroll 无法被手势库捕获
浏览器对 overflow: scroll 区域做了底层优化：触摸事件被系统级滚动机制直接吞掉，不冒泡到 JS 层。即使你给容器加了 touchstart 监听器，也大概率收不到事件（尤其在 iOS Safari 中）。
- iOS Safari 默认禁用非
scrolling元素上的touchmove事件，除非显式设置touch-action: none - Android Chrome 虽稍宽松，但快速滑动时仍可能丢事件或延迟派发
-
preventDefault()在未声明touch-action的滚动容器中无效，导致手势拦截失败
让滑动容器支持手势识别的三个必要条件
必须同时满足以下三点，才能稳定捕获并处理手势：
- 容器设置
touch-action: none（禁用浏览器默认手势，把控制权交还 JS） - 容器需有明确尺寸和
overflow: hidden（不能依赖auto或scroll） - 手动实现滚动位移：用
transform: translateY()或修改scrollTop，而非依赖原生滚动条
示例关键 CSS：
.scroll-container {
height: 300px;
overflow: hidden;
touch-action: none;
}
若仍需保留原生滚动条视觉，可用 ::-webkit-scrollbar 自定义，但逻辑上必须绕过它。
touch-action 的取值陷阱与调试技巧
touch-action 不是“开/关”开关，不同值直接影响手势流向：
-
touch-action: pan-y→ 允许垂直滚动，但会屏蔽所有touchmove，手势库拿不到原始位移数据 -
touch-action: none→ 必须配preventDefault()，否则页面会“卡住”或双指失效 -
touch-action: manipulation→ iOS 上等价于pan-x pan-y pinch-zoom，但会禁止click延迟，且不暴露touchmove细节
调试建议：用 Chrome DevTools 的 “Rendering > Paint flashing” 和 “Sensors > Touch simulation” 验证事件是否真正到达目标元素。
用 PointerEvent 替代 TouchEvent 更可靠吗？
在现代移动端（Chrome 84+、Safari 13.4+），PointerEvent 是更优选择，但要注意：
- 必须监听
pointerdown/pointermove，且调用event.preventDefault()才能阻止默认滚动 - iOS Safari 对
pointercancel触发较敏感（比如快速划出区域），需在pointerup和pointercancel中统一清理状态 - 不要混用
TouchEvent和PointerEvent监听器，否则可能重复触发或冲突
最小可行手势监听片段：
el.addEventListener('pointerdown', (e) => {
if (e.isPrimary) {
startY = e.clientY;
}
});
el.addEventListener('pointermove', (e) => {
if (e.isPrimary && e.cancelable) {
e.preventDefault(); // 关键：否则手势被浏览器吞掉
}
});
真正难的不是写手势逻辑，而是判断什么时候该放行原生滚动（比如列表里嵌套可点击卡片）、什么时候该完全接管（比如轮播图）。这两个边界一旦模糊，用户就会遇到“点不动”或“滑不动”的体验断层。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
