Safari 15.4 以下 scroll-snap-type 静默失效，需运行时检测并 JS 回退；iOS 要求 overflow-y: scroll + overflow-x: hidden + touch-action: pan-y + 非 body 容器；scroll-snap-align: start 最可靠，禁用 margin，scroll-snap-stop: always 兼容性差，索引同步必须手写 JS。
scroll-snap-type 在 Safari 15.4 以下完全不生效
不是“表现差”，而是语法被解析但行为静默：滚动不会吸附，页面可能白屏或卡死。CanIUse 显示“支持”只代表不报错，不代表可用。真机测试必须用 Safari Web Inspector 的 Timeline 面板确认 ScrollStart/ScrollEnd 事件是否触发。
必须做运行时检测：
if (!CSS.supports('scroll-snap-type', 'y mandatory')) {
// 启用 JS fallback：监听 scrollend 或节流 scroll + getBoundingClientRect 校准
}
- 不能依赖
@supports媒体查询——它在旧 Safari 中也返回true，但实际无效 - 检测值必须是完整声明，如
'y mandatory'，单写'y'或'mandatory'会误判 - iOS 15.3 及更早、macOS Monterey 之前版本均属此范畴
移动端 Safari 必须显式设置 overflow-y: scroll
iOS Safari 对滚动上下文极其挑剔：用 overflow: auto、overflow: scroll 甚至 overflow-y: auto 都会被忽略 scroll-snap-type。只有同时满足以下三项才有效：
-
overflow-y: scroll（垂直）或overflow-x: scroll（水平） -
overflow-x: hidden（垂直滚动时）或overflow-y: hidden（水平滚动时），否则横向/纵向干扰判定 - 容器不能是
<body>或<html>，必须用包裹层如.scroll-container
另外，touch-action: pan-y（垂直）或 touch-action: pan-x（水平）是强制项，否则 iOS 默认拦截 touch 事件，导致滑动无吸附、跳页或卡顿。
Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries
下载
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
立即学习“前端免费学习笔记（深入）”；
scroll-snap-align: start 是最稳的选择
在跨浏览器尤其是 iOS 上，scroll-snap-align: center 和 scroll-snap-align: end 行为不一致：横竖屏切换后偏移、Safari 计算基准含 margin、flex 容器中对齐点漂移等问题频发。
- 横向幻灯片或标签页：用
scroll-snap-align: start+flex: 0 0 100%+ 左对齐布局，视觉上等效居中 - 垂直分屏：用
scroll-snap-align: start+height: 100vh，避免因scroll-padding-top或 fixed 导航栏导致顶部遮挡 - 禁用子项的
margin—— Safari 可能将 margin 纳入吸附基准，造成位置偏差
scroll-snap-stop: always 兼容性极差
该属性本意是防止快速拖拽跳过两页，但仅 Chrome 107+ 和 Safari 15.4+ 支持，Android WebView、旧版 iOS 完全无视。强行使用会导致降级逻辑失效。
- 不要把它当作“必加项”，而应视为可选增强
- 若需精确控制停靠节奏，优先用 JS 监听
scrollend（iOS 16+ 稳定）或节流scroll+getBoundingClientRect()校准 -
scroll-behavior: smooth与scroll-snap-stop: always共存时，后者优先级更高，但旧浏览器中两者都不可靠
真正容易被忽略的是：scroll-snap 是纯 CSS 行为，不暴露当前索引。所有指示器同步、自动轮播、URL hash 更新，都必须额外写 JS 实现，且要兼容 scrollend 事件缺失的环境。
