scroll-snap不生效时，先确认是否真在旧版浏览器；chrome 69+、firefox 68+、safari 14.1+原生支持，但safari 14.0及更早无视center对齐，ios 13.7及更早不触发scrollend；caniuse仅标语法支持，不保证行为生效；safari≤14或android webview≤chrome 85需降级为intersectionobserver+getboundingclientrect校准方案。
scroll-snap 不生效时，先确认是否真在“旧版浏览器”
很多所谓“不兼容”，其实是写法错误或环境未满足。Chrome 69+、Firefox 68+、Safari 14.1+ 原生支持 scroll-snap-type 和 scroll-snap-align；但 Safari 14.0 及更早版本对 scroll-snap-align: center 完全无视，iOS 13.7 及更早甚至不触发 scrollend 事件。别轻信 CanIUse 的“支持”标记——它只表示语法不报错，不代表行为生效。
必须降级的场景：Safari ≤14 或 Android WebView ≤Chrome 85
这些环境下，scroll-snap-type 往往静默失效（DevTools 中 computed styles 显示为空），且无法靠 polyfill 补救。此时应主动降级为 JS 驱动方案，核心是监听滚动并校准位置：
- 用
IntersectionObserver监听视口内可见的分区（如.section），而非依赖scroll事件——后者在 iOS 上节流严重，易卡顿 - 校准逻辑必须基于
getBoundingClientRect()计算元素顶部与视口顶部的距离，不能依赖scrollTop（受 UA 样式、缩放、地址栏收缩干扰） - 触发吸附用
element.scrollTo({ top: targetTop, behavior: 'smooth' })，禁用直接赋值scrollTop，否则破坏滚动引擎上下文 - 为避免快速滑动后连续触发，加防抖：仅在
scrollend触发后执行校准；旧版 Safari 不支持该事件，则 fallback 到setTimeout+requestIdleCallback组合判断“滚动已停”
移动端 Safari 13–14 的特殊处理
这个区间版本有大量“半支持”行为，比如识别 scroll-snap-type 但忽略 scroll-snap-stop: always，或对 min-height: 100vh 拒绝注册吸附区域。此时不能简单降级，而要混合策略：
- 仍保留 CSS
scroll-snap-type: y mandatory和scroll-snap-align: start，因为部分机型（如 iPadOS 14.5）能跑通基础吸附 - 同时注入轻量 JS fallback：监听
scroll，每 100ms 检查当前getBoundingClientRect().top，若偏离最近吸附点 > 20px，则自动scrollTo校正 - 关键修复：给滚动容器加
overscroll-behavior: contain，防止 iOS 弹性滚动冲过头后回弹卡在两屏之间 - 禁用所有
transform、will-change、filter等会破坏 WebKit 滚动上下文识别的样式
真正难的不是写 JS，而是保持盒模型干净
无论用 CSS 还是 JS 实现吸附，最终都依赖子元素边界可预测。最容易被忽略的是：scroll-snap-align: start 对齐的是元素的 border box 顶部，但若子元素有 margin-top、父容器有 padding-top、或用了 display: inline-flex 导致基线偏移，吸附点就会错位。真机测试时，用 Safari 开发者工具勾选 “Scroll snapping regions”，看是否亮起蓝色吸附区域——没亮，就说明根本没注册成功，这时候补再多 JS 也没用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
