应根据滚动方向选择：pan-x用于横向轮播、时间轴等仅需水平滚动的容器，pan-y用于纵向抽屉、全屏滚动等仅需垂直滚动的场景；误设在整页容器会导致反向滚动失效。
touch-action: pan-x 和 pan-y 怎么选才不卡住页面滚动
加 touch-action: pan-x 是为轮播图、时间轴这类只横向滑动的容器“划清界限”：浏览器看到这个声明，就会在 touchstart 阶段立刻决定“只处理水平位移”，不再等待 300ms 判断用户是不是想滚动页面。但错误地把它加在整页容器（比如 或 body）上，会导致纵向无法滚动——用户一划就卡住，手指松开后页面毫无反应。
常见误用场景：
-
touch-action: pan-x写在了overflow-y: auto的父容器上，子元素纵向内容溢出却不能滚 - 嵌套轮播图里又套了一个横向滑动组件，外层设了
pan-x，内层也设pan-x，结果手势被外层截断，内层收不到事件 - Android WebView 中，
pan-x在某些华为/小米定制系统里会连点击都变迟钝，尤其配合transform动画时
稳妥做法是：只加在明确需要横向交互的直接容器上，且该容器必须有 overflow-x: auto 或明确宽度限制；同时确保其父级没设 touch-action: none 或 manipulation。
为什么 touch-action: none 没禁掉 iOS 的弹性回弹
要真正压住它，必须配合 JS： 注意：老版 iOS（12.x 及更早）对 它只对“浏览器认定为可点击”的元素生效： 另外， 是。下拉刷新逻辑依赖精确捕获顶部区域的 排查重点： 最隐蔽的问题是：CSS 里写了 touch-action: none 确实能阻止浏览器默认滚动，但它不碰「弹性滚动」和「缩放」这两个行为。iOS Safari 尤其明显：哪怕你在 touch-action: none，手指拉到顶再松手，页面还是会“啪”一下弹回来——这不是 bug，是浏览器故意保留的物理反馈机制。
touchmove，调用 e.preventDefault()
{ passive: false }，否则 Chrome 和 iOS 14+ 会忽略 preventDefault
document 上，否则整个页面都不能滚；只绑在你真要锁定的那块区域touch-action: none，再加 preventDefault 不冲突，但属于冗余操作touch-action: none 响应极慢，甚至完全无视，真机测试不可跳过。touch-action: manipulation 为什么按钮点了没反应
touch-action: manipulation 是为点击优化的，但它不是全局开关。写在 body 或通配符 * { touch-action: manipulation } 上基本无效，还可能让轮播图突然滑不动。
、 标签天然支持role="button" + tabindex="0"，或加空属性 ontouchstart=""
touchAction 值确实是 manipulation，而不是被父级 none 覆盖onclick 就自动激活——部分旧 WebView 仍要求显式语义manipulation 会禁用双指缩放，但不影响单指滚动；如果页面主体本身需要纵向滚动，别给整个 加这个值。下拉刷新失效，是不是 touch-action 搞的鬼
touchmove，但一旦父容器设了 touch-action: manipulation 或 pan-y，浏览器可能直接接管手势，把事件吞掉，你的 JS 完全收不到。touch-action: none 或 overflow: hidden）建议设 touch-action: pan-y，既允许滚动，又不干扰顶部刷新判断body 上设 touch-action: manipulation，它会禁用所有非双击手势，包括下拉起始动作-webkit-overflow-scrolling: touch，会导致 touchmove clientY 跳变，刷新距离算不准；现代 iOS 已废弃此属性，必须移除overscroll-behavior-y: contain，它会阻止滚动到底部时触发全局下拉，但同时也可能干扰你自定义的顶部刷新逻辑——上线前务必在 Safari 和 Chrome for Android 真机上跑一遍完整下拉流程。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
