Safari 中 touch-action 失效主因是未作用于真正可滚动容器：iOS 16.4 前不支持 body/html；需设于 overflow-y:auto 且内容溢出的 div 等元素，并排除父级 touch-action:none 截断。

touch-action 在 Safari 中不是“失效”，而是没满足它严格生效的条件——最常见原因是写在了 body 或 html 上，或目标容器根本不可滚动。

为什么 touch-action 写在 body/html 上完全不生效

iOS Safari 直到 16.4 才开始支持 touch-action，且明确禁止在 body 和 html 元素上设置该属性。DevTools 里你会看到 computed 样式中 touch-action 是灰色禁用状态，浏览器直接忽略整条声明。

必须把样式移到实际滚动容器上，比如一个带 overflow-y: auto 的

或

。

• 检查元素是否是 body 或 html：如果是，立刻移走
• 确认目标容器有显式高度（如 height: 400px）且内容溢出（scrollHeight > clientHeight）
• 临时加 border: 2px solid red 看内容是否撑出容器边界

容器设置了 pan-y 却仍无法纵向滚动

touch-action: pan-y 只在“可滚动容器”上激活响应逻辑。如果容器内容没溢出、或者父级用了 touch-action: none，它就形同虚设。

Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries

规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...

下载

• 确保容器有 overflow-y: auto 或 scroll，且 scrollHeight > clientHeight
• 逐级向上检查父元素的 computed touch-action 值，避免被 none 或 pan-x 截断
• 轮播图、弹窗遮罩层等第三方组件常自带 touch-action: pan-x，它们很可能包裹了你的列表区域
• 若父级限制太严，可在其上显式覆盖为 touch-action: pan-y（需保证不影响自身交互）

touch-action: manipulation 后双击/捏合缩放没了

这不是 bug，是规范行为。touch-action: manipulation 明确禁用双击和 pinch-zoom，只保留 tap 和 pan。它等效于 pan-x pan-y，但不含 pinch-zoom。

• 若需缩放，请改用 touch-action: pinch-zoom，并配
• touch-action: manipulation 必须作用于具体可点击元素（如 button、a、[role="button"]），不能写在 body 或通配符上
• 配合 -webkit-tap-highlight-color: transparent 才能完整消除延迟与高亮
• 某些辅助功能开启时（如“减少运动”），Safari 会弱化或忽略该值，真机测试不可跳过

最容易被忽略的是：**容器是否真正可滚动，比写对值更重要**。Safari 不会为你“兜底”，它只在满足条件的节点上执行规范，其余一律静默跳过。调试时优先看 computed 样式里的 touch-action 是否为有效值，而不是反复改 CSS 规则。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！