touch-action: none 不会彻底禁用原生滚动，但会阻断浏览器默认触摸行为响应链，使 scroll 事件不触发、pointerdown 也收不到，需手动监听 touch 事件并 preventdefault 才能接管。
touch-action 设置为 none 会彻底禁用原生滚动吗
不会，但会阻断浏览器默认的触摸行为响应链——包括滚动、缩放、双击放大。只要页面里有 touch-action: none 的元素覆盖了触摸区域，手指划下去时，scroll 事件根本不会触发，pointerdown 也收不到（除非显式加了 touch-action: manipulation 或其他宽松值）。
- 常见错误现象：
touch-action: none加在容器上后，内部列表滑不动，且scroll监听器完全静默 - 真实使用场景：自研手势库（如拖拽排序、画布平移），需要完全接管 touch 流程
- 必须配套做两件事：手动监听
touchstart/touchmove，并在touchmove中调用event.preventDefault()，否则 iOS Safari 仍可能触发回弹或缩放 - 兼容性注意：旧版 Android WebView 对
touch-action支持不全，none可能被忽略，得 fallback 到preventDefault+{ passive: false }
移动端下 touch-action: pan-y 和 overflow: auto 冲突怎么办
冲突的本质是「滚动权归属不一致」：CSS 声明允许纵向滚动，但父容器或祖先节点设置了更严格的 touch-action（比如 pan-x 或 none），导致浏览器把触摸事件直接截断，子元素的 overflow: auto 形同虚设。
- 典型错误现象：列表容器写了
overflow-y: auto，但手指一划就触发整页滚动，子容器纹丝不动 - 检查顺序：从触发点元素往上查，直到
body，看哪一层的touch-action值比pan-y更窄（例如pan-x、manipulation、none） - 修复关键：确保滚动容器自身及所有父级都至少声明
touch-action: pan-y；如果父级必须限制方向（如轮播图），就别让轮播和列表共用同一层 DOM 结构，用transform: translateZ(0)隔离层叠上下文 - 性能影响：滥用
touch-action: pan-y在低端安卓机上可能增加合成层判定开销，优先只加在明确需要滚动的容器上，而非全局* { touch-action: pan-y }
touch-action: manipulation 能替代 preventDefault 吗
不能替代，但能减少对 preventDefault 的依赖——它告诉浏览器：“这个元素只做点击/轻触类操作，不用管滚动或缩放”，从而让 click 事件在 iOS 上不延迟（300ms），同时保留原生滚动能力。
- 常见误用：给按钮加
touch-action: manipulation后，再手动preventDefault所有 touch 事件，结果反而破坏了 click 触发 - 适用场景：纯点击交互区域（按钮、链接、开关），不需要自定义手势，也不希望滚动被干扰
- 参数差异：
manipulation≈pan-x pan-y pinch-zoom的子集，但明确排除了双击缩放和长按菜单；而auto默认允许所有行为，none则全部禁止 - 注意边界：Android Chrome 65+ 才完整支持
manipulation，老版本会退化成auto，若需兼容，仍要监听touchstart并判断event.cancelable
iOS Safari 下 touch-action 失效的隐蔽原因
最常被忽略的是 viewport 元标签里的 user-scalable=no ——它不仅禁用双指缩放，还会让浏览器忽略大部分 touch-action 声明，哪怕你写了 pan-y，滚动依然卡顿或跳页。
立即学习“前端免费学习笔记（深入）”；
- 错误现象：同一段 CSS，在 Chrome 滚得顺，在 Safari 里手指一动就跳到顶部，控制台无报错
- 检查项：确认
<meta name="viewport" content="... user-scalable=no">是否存在；若必须禁用缩放，请改用maximum-scale=1.0, minimum-scale=1.0，保留user-scalable=yes - 另一个坑：iOS 15.4+ 对
touch-action: pinch-zoom的处理更严格，如果页面没声明viewport的width，部分机型会直接忽略该值 - 调试技巧：Safari 开发者工具中勾选 “Disable Touch Events” 再取消勾选，可强制重置触摸行为状态，比刷新更可靠
事情说清了就结束
