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