safari 15.4+ 才真正支持 scroll-snap-type，此前版本仅解析语法不触发吸附，需运行时检测并降级 js 方案；必须用 overflow-y: scroll + overflow-x: hidden 的包裹容器、touch-action: pan-y，且子项高度严格为 height: 100vh。
scroll-snap-type 在 Safari 15.4+ 才真正可用
低于 Safari 15.4 的版本（包括 iOS 15.3 及更早）对 scroll-snap-type 的支持是残缺的：属性会被解析但不触发吸附行为，页面可能白屏、滚动失控或完全静默。真机测试时，不能只看视觉效果，得用 Safari Web Inspector 的 Timeline 面板确认是否触发 ScrollStart/ScrollEnd 事件。
必须做运行时检测：
if (!CSS.supports('scroll-snap-type', 'y mandatory')) {
// 启用 JS fallback：监听 scrollend 或节流 scroll + getBoundingClientRect 校准
}
别依赖 CanIUse 的“支持”标记——它只表示语法不报错，不代表行为生效。
移动端 Safari 必须显式设 overflow-y: scroll
iOS Safari 要求滚动容器明确声明 overflow-y: scroll（而非 overflow: auto 或 overflow: scroll），否则直接忽略 scroll-snap-type。同时 overflow-x 必须设为 hidden，否则横向滚动干扰 snap 判定。
- ✅ 正确：
overflow-y: scroll; overflow-x: hidden; - ❌ 错误：
overflow: auto;、overflow: scroll;、overflow-y: auto;
容器不能是 或 ，必须用包裹层（如 .scroll-container），因为 UA 样式会覆盖根元素的滚动上下文。
touch-action: pan-y 是 iOS 滚动吸附的前提
Safari 默认拦截 touch 事件以优化手势识别，不加 touch-action: pan-y 就会绕过 scroll snap 逻辑，导致滑动无吸附、跳页或卡顿。
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
注意：
- 仅需在滚动容器上设置，子项不用
- 不要混用
transform、will-change: transform或filter，旧版 WebKit 会跳过 snap 计算 -
-webkit-overflow-scrolling: touch在 iOS 15.4+ 已非必需，留着反而可能冲突，建议删掉
scroll-snap-stop: always 在 Safari 仅对触控惯性生效
scroll-snap-stop: always 在 Safari 中只对「快速滑动」（带惯性）有效；鼠标滚轮、键盘方向键、element.scrollTo() 都不会触发强制停顿，会退回到 mandatory 的基础吸附逻辑。
验证是否生效：
getComputedStyle(document.querySelector('.item')).scrollSnapStop
如果返回 "" 或 "normal"，说明当前环境不支持该值。
Chrome/Edge ≤120 和 Firefox 全系至今仍静默忽略 scroll-snap-stop: always，必须用 @supports + JS 校准兜底，且校准逻辑不能和 Safari 原生行为重叠。
最易被忽略的是：每个子项高度必须严格等于容器高度（含 border/padding），用 height: 100vh，不用 100% 或 min-height——地址栏收放会导致 100% 跳变，min-height 会让内容撑高破坏吸附锚点。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
