touch-action: none 仅禁用浏览器默认滚动行为，不阻止 touch 事件触发；须作用于有尺寸且未被父级覆盖的容器；需配合 {passive: false} 的 preventDefault 才能彻底禁用弹性滚动与缩放。
touch-action: none 在移动端是否真能禁用滑动
能，但只对「浏览器默认滚动行为」生效，比如页面整体上下滑、图片轮播区域左右滑。它不阻止 touchstart/touchmove 等事件触发，也不影响你自己写的 JS 滑动逻辑。很多开发者以为加了就万事大吉，结果发现手指一划，touchmove 还是照常触发——这是预期行为，不是 bug。
哪些元素上加 touch-action: none 才有效
必须加在「实际接收触摸事件的容器」上，且该容器需满足：有明确尺寸（不能是 height: auto 且内容为空）、未被父级 touch-action: manipulation 或 pan-x 覆盖。常见失效场景：
- 父容器设置了
touch-action: pan-y，子元素设none会被忽略（iOS Safari 尤其严格） - 元素本身没有 overflow 或高度，浏览器不认为它是可交互区域
- 用了
position: fixed但未设置top/bottom，导致渲染层未激活触摸响应
推荐写法：
.no-swipe {
touch-action: none;
width: 100%;
height: 200px;
overflow: hidden;
}
和 preventDefault 配合使用的必要性
单独靠 touch-action: none 无法阻止 iOS 上的「弹性回弹」或「页面缩放」，尤其在 或 上。必须配合 JS 在 touchmove 中调用 event.preventDefault()，但要注意：
- 仅对取消默认行为有效，必须在事件监听中加
{ passive: false }，否则 Chrome/iOS 会忽略preventDefault - 不要在 document 上全局监听，否则影响所有滚动；应绑定到具体目标元素
- 若同时用了
touch-action: none，再调preventDefault属于冗余，但无害
示例：
el.addEventListener('touchmove', e => {
e.preventDefault();
}, { passive: false });
Android 与 iOS 的兼容性差异
touch-action 在 Android Chrome 56+、iOS Safari 13.4+ 支持良好，但老版本 iOS（如 12.x）对 none 响应迟钝，甚至完全忽略。更隐蔽的问题是：
- iOS Safari 中，如果元素内有
input或textarea，即使设了touch-action: none，聚焦时仍可能触发页面滚动 - Android WebView（尤其旧版）可能将
touch-action: none解释为“禁用所有手势”，连点击都失灵 - 部分安卓厂商定制系统（如华为 EMUI）会绕过该声明，强制启用双指缩放
上线前务必在真机上用 Safari 和 Chrome for Android 测试目标区域的手势反馈，别只信模拟器。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
