touch-action: none 会彻底禁用原生滚动、缩放等交互，仅适用于完全自定义手势的场景；应优先使用 pan-x、pan-y 等保守值，并注意 ios 兼容性与 fixed 元素的事件异常。
touch-action: none 会彻底禁用原生滚动，慎用
移动端浏览器默认对 touchstart / touchmove 区域保留原生滚动、缩放、双击放大等行为，这是性能和体验的基础保障。touch-action: none 一加上，所有这些都归零——包括手指划屏时的惯性滚动、快速滑动加速、甚至部分安卓 WebView 的回弹效果。它只适合你完全接管手势（比如实现一个自定义轮播或画布拖拽），且已用 preventDefault() + requestAnimationFrame 做好平滑动画。
常见错误现象：touch-action: none 后页面“变卡”，手指一松就停，没有滚动惯性；或者 iOS 上整个页面无法上下滑动，连 都被锁死。
- 仅在明确需要拦截默认行为的容器上设置，不要直接写在
html或body上 - 优先用更保守的值：如
touch-action: pan-y允许竖向滚动但禁用横向拖拽，比none安全得多 - 若同时监听
touchmove，必须在事件回调里调用event.preventDefault()，否则部分安卓机型仍可能触发原生滚动抖动
pan-x 和 pan-y 组合使用时要注意触发条件差异
touch-action: pan-x pan-y 看似等价于默认行为，其实不是。浏览器只有在检测到足够“明确”的初始位移方向（通常 > 2–3px）后，才锁定该轴向并抑制另一轴向响应。这意味着：轻微斜向滑动可能被忽略，或在某些低端安卓机上误判为“非滚动意图”，导致 touchmove 不触发。
使用场景：实现一个支持横向滚动的表格区域，同时允许页面整体竖向滚动 —— 正确做法是给表格容器设 touch-action: pan-x，其余区域保持默认（即不设或设 auto）。
-
pan-x不代表“只能横滑”，而是“允许浏览器启动横向滚动”，竖向微动仍可能被忽略 - 若容器本身不可滚动（
overflow: hidden），设pan-x实际无效，浏览器会 fallback 到默认行为 - iOS Safari 对
pan-x pan-y的判定比 Chrome 更严格，测试务必覆盖真机
touch-action 在 fixed 定位元素上的表现不稳定
给 position: fixed 的导航栏或悬浮按钮加 touch-action: manipulation 本意是提升点击响应，但部分 Android Chrome 版本（尤其是 90–105）会因此导致其下方内容区域的触摸事件丢失或延迟，尤其当 fixed 元素高度较大或有半透明遮罩时。
错误现象：点击 fixed 按钮下方的列表项无反应，或需点两次；滑动时 fixed 元素边缘出现“卡顿缝”。这不是 CSS 本身问题，而是渲染线程与合成器之间事件分发竞争所致。
- 避免对 full-bleed 的
fixed层（如底部 TabBar）设置touch-action，让它保持auto - 若必须优化点击，改用
touch-action: manipulation+cursor: pointer+ 移除:active伪类过渡（减少重绘） - 在 fixed 元素上使用
will-change: transform可能缓解，但会增加内存占用，需权衡
兼容性兜底：iOS 12.2 以下不支持 touch-action
iOS Safari 直到 12.2 才完整支持 touch-action，更早版本（包括大量企业内网 iPad）会直接忽略该声明，回退到默认行为。这不是 bug，是事实。
这意味着：如果你依赖 touch-action: pan-y 来防止横向误触，旧 iOS 上用户划屏稍斜就会触发横向滚动，破坏布局。不能靠 JS 检测 CSS.supports('touch-action', 'pan-y') 来开关逻辑，因为检测本身返回 true，但实际无效。
- 对关键交互区域（如轮播、地图容器），CSS 中同时写两行：
touch-action: pan-y;和-ms-touch-action: pan-y;（IE10/11 兼容） - JS 层需保留传统防御：监听
touchmove，用Math.abs(deltaX) > Math.abs(deltaY)主动判断方向并preventDefault() - 别假设
touch-action能替代事件判断——它只是优化，不是替代
真正麻烦的从来不是怎么写这行 CSS，而是当它在某台 iPad 上静默失效时，你得知道该去哪补上那三行 JS 判断。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
