safari 中 touch-action: pan-y 失效是因为仅在可滚动容器上生效，且 ios 16.4+ 才支持 body/html 外的元素；需确保作用于 overflow-y: auto 的子容器、内容溢出、无父级 touch-action 干扰，并验证系统版本与辅助功能设置。
当你在 Safari 浏览器中给元素设置 touch-action: pan-y 却发现页面仍可双指缩放、下拉橡皮筋、或滚动完全失灵时，并不是 Safari “不识别”该属性，而是它严格按规范执行——只在满足特定条件的 DOM 节点上生效，且对值的语义理解比 Chrome 更刚性。
检查是否作用于根元素（body/html）
第一步：打开 Safari 开发者工具 → Elements 面板 → 选中 或 标签 → 查看 computed 样式中 touch-action 是否显示为灰色禁用状态。
如果显示为灰色，说明 Safari 直接忽略该声明——【iOS Safari 从 16.4 起才支持 overscroll-behavior 和 touch-action，且明确不支持在 body/html 上设置 touch-action】。哪怕你写了 body { touch-action: pan-y; }，浏览器也当没看见。
必须把样式移到实际滚动容器上，比如一个带 overflow-y: auto 的 <div class="scroll-container">。
<h2>确认容器是否真正“可滚动”</h2>
<p>方法一：检查内容是否溢出</p>
<p>给目标容器加临时边框：<code>border: 2px solid red;，再在 Safari 真机或模拟器中查看其内部内容高度是否超过容器设定高度（如 height: 300px;）。若内容撑不满，overflow-y: auto 不会触发滚动机制，touch-action 就不会被激活。
方法二：强制触发溢出
在容器内末尾加一行 <div style="height: 100px;"></div>，或用 JS 动态插入足够长的内容，确保 scrollHeight > clientHeight 成立。
【只要容器不可滚动，touch-action 值再正确也形同虚设】。
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
排查祖先节点的 touch-action 干扰
① 从目标元素开始，逐级向上检查父元素的 computed touch-action 值；
② 若某层父元素设置了 touch-action: none 或 pan-x，而你的容器需要 pan-y，那么父级更窄的限制会直接截断触摸事件流，子容器的 overflow: auto 就无法响应；
③ 修复方式：给所有父级（直到滚动容器的直接父级）显式设置 touch-action: pan-y，或至少不低于子级所需权限；
④ 特别注意轮播图、弹窗遮罩层等常带 touch-action: pan-x 的组件，它们很可能包裹了你的滚动区域。
验证 Safari 版本与平台兼容性
打开 Safari → 设置 → 关于本机 → 查看 iOS 版本。若低于 16.4，touch-action 在非按钮类元素上基本无效；
若为 iOS 16.4+，但属性仍不生效，检查是否启用了“减少运动”辅助功能——部分版本 Safari 会弱化 touch-action 行为；
在桌面端 Safari（macOS）中，touch-action 仅对触控板手势有限支持，真机测试不可替代。
