Safari 中 scroll-snap-type 失效主因是滚动容器未满足严苛条件：必须显式设 overflow-y: scroll（非 auto）、非 body/html、同步加 overflow-x: hidden、子项为直接子元素且 height: 100vh、禁用 margin/transform/touch-action 冲突，并需运行时检测+JS 校准兜底。
直接写 scroll-snap-type 却在 Safari 里没反应？不是代码漏了，是 Safari 对滚动上下文的激活条件比其他浏览器严得多——缺任意一个硬性条件，它就当没这回事。
滚动容器必须显式设 overflow-y: scroll 且非根元素
Safari 不认 overflow: auto、overflow: scroll 或 overflow-y: auto，只接受明确的 overflow-y: scroll（纵向）或 overflow-x: scroll（横向）。同时，容器不能是 <body> 或 <html>，必须用包裹层，比如 <div class="snap-container">。
-
overflow-x: hidden必须同步设置，否则横向滚动干扰会直接让吸附逻辑静默失效 - 如果用了
position: sticky父容器，Safari 可能拒绝注册 snap 区域 - 真机上用 Safari Web Inspector 的 “Scroll snapping regions” 功能查看是否亮起蓝色区域——不亮，说明根本没启用
子元素必须是直接子项，且高度严格固定
所有可停靠的子项（如 <section>）必须是滚动容器的**直接子元素**。套一层 <div class="inner"> 就会让 scroll-snap-align 完全无效。
- 每个子项必须设
height: 100vh（不是min-height，不是flex: 1，不是100dvh）；iOS Safari 15.4+ 对100dvh支持不稳定，min-height会被视为“高度不确定”，直接跳过注册 - 禁用所有
margin：哪怕margin-top: 1px，Safari 也会把它算进 content box 基准，导致scroll-snap-align: center偏移 - 避免父级有
transform、will-change、filter或contain: layout，这些会让 WebKit 跳过 snap 边界计算
移动端必须加 touch-action: pan-y
Safari 默认拦截 touch 事件做手势识别，不加 touch-action: pan-y（纵向）或 touch-action: pan-x（横向），滑动就变成拖拽，松手即停，完全绕过 scroll snap 逻辑。
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
立即学习“前端免费学习笔记（深入）”；
- 检查是否全局或局部设置了
touch-action: none或touch-action: manipulation——它们会覆盖并禁用原生吸附 - 如果页面监听了
touchstart并调用了preventDefault()，也等效于加了touch-action: none - 这个声明必须写在滚动容器上，不是子项，也不是 body
运行时检测 + JS 微调兜底
别信 CanIUse 的“支持”标记——Safari 15.3 及更早版本虽解析语法，但不触发行为；iOS 15.4+ 才真正可用。必须用运行时检测：
if (!CSS.supports('scroll-snap-type', 'y mandatory')) {
// 启用 JS fallback
}
- 旧版 Safari 不支持
scrollend事件，得用节流scroll+getBoundingClientRect()判断停靠位置 - 松手后偏一点？别手动算
scrollTop，用element.scrollIntoView({ block: 'start', behavior: 'smooth' })微调 - 真机测试比 DevTools 更可靠：Timeline 面板看是否触发
ScrollEnd，而不是只盯视觉停靠点
最常被忽略的一点：Safari 的 scroll-snap-type: y mandatory 在快速甩动后并非真正“强制”——它优先保帧率，尤其当子项高度不一致、或用了 position: sticky 时，很容易卡在两屏之间。这时候光靠 CSS 已经不够，JS 校准不是备选，而是必选项。
