touch-action: none 能真正禁用浏览器默认滑动（如页面整体滚动、轮播图区域滑动），但不阻止 touchstart/touchmove 事件触发，也不影响 js 自定义拖拽逻辑；它必须作用于满足明确尺寸、未被父级覆盖、本身可交互的容器上，否则失效。
touch-action: none 能不能真正禁用滑动
能，但只禁用浏览器默认滚动行为，比如页面整体上下滑、轮播图区域左右滑。它不阻止 touchstart/touchmove 事件触发，也不影响你写的 JS 拖拽逻辑。很多人加了 touch-action: none 后发现手指一划，touchmove 还是照常执行——这不是 bug，是设计如此。
哪些地方加 touch-action: none 才生效
必须加在「实际接收触摸事件的容器」上，且该容器需满足三个硬性条件：
- 有明确尺寸（不能是
height: auto且内容为空） - 未被父级
touch-action: none或更窄限制（如pan-x）覆盖（iOS Safari 尤其严格） - 本身是可交互区域：比如设置了
overflow: hidden、width和height，或内含input等可聚焦元素
常见失效场景：父容器设了 touch-action: pan-y，子元素设 none 会被忽略；用了 position: fixed 却没写 top/bottom，导致渲染层未激活触摸响应。
为什么单独用 touch-action: none 还会弹性回弹或缩放
因为 touch-action: none 在 iOS 上无法阻止「弹性回弹」和「双指缩放」，尤其作用于 或 时。必须配合 JS 的 preventDefault()：
- 监听目标元素的
touchmove，不是document全局监听 - 添加
{ passive: false }选项，否则 Chrome/iOS 会忽略preventDefault() - 示例：
el.addEventListener('touchmove', e => { e.preventDefault(); }, { passive: false });
注意：如果已设 touch-action: none，再调 preventDefault() 属于冗余但无害；但如果没设，单靠 JS 无法彻底禁用缩放。
Android 和 iOS 的关键兼容差异
老版本 iOS（12.x、13.0–13.3）对 manipulation 完全不支持，pan-y 在 iOS 16.4 前也不能用于 或 。更隐蔽的问题：
- iOS Safari 中，
input或textarea聚焦时仍可能触发页面滚动，即使外层设了touch-action: none - 部分安卓厂商系统（如华为 EMUI）会绕过该声明，强制启用双指缩放
- Android WebView 旧版本可能把
touch-action: none解释为“禁用所有手势”，连点击都失灵
真正容易被忽略的是祖先节点的压制效应：只要任意父级（哪怕只是 div#app）设了 touch-action: none，其所有后代无论怎么写 manipulation 都无效——这在 Vant/Naive UI 等框架中极常见。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
