不支持 scroll-snap-type 的浏览器需用 JS 模拟吸附，核心是 scrollend 触发后通过 getBoundingClientRect 计算最近子项并 scrollBy 平滑滚动，禁用 touchstart preventDefault、加 touch-action 和 overscroll-behavior 防冲突，禁用 requestAnimationFrame 轮询。
不支持 scroll-snap-type 的浏览器（如 Safari 15.3 及更早、旧版 Android WebView、部分 Samsung Internet）无法触发原生吸附，必须用 JS 模拟滚动停靠逻辑；但“无缝”不是靠暴力 scrollTo 实现的，而是靠节流 + 位置校准 + scrollend 兜底，否则会卡顿、跳页或与用户手势冲突。
检测 scroll-snap 是否真正可用
不能只查 CSS.supports('scroll-snap-type', 'y mandatory')——它在 Safari 15.3 里返回 true，但吸附行为完全静默。必须运行时验证：
- 创建一个带
scroll-snap-type: y mandatory和子项scroll-snap-align: start的测试容器 - 用
element.scrollBy({ top: 1, behavior: 'smooth' })触发一次微滚动 - 监听
scrollend事件是否触发，且element.scrollTop是否精确落在子项边界上（如0、100vh、200vh） - 任一条件失败，就启用 JS fallback
用 getBoundingClientRect + scrollBy 实现吸附校准
核心思路是：不监听 scroll，而是在用户松手后（scrollend 或 touchend），计算当前可视区域中心最接近哪个子项，再用 scrollBy 平滑滚动过去。关键点：
- 必须用
scrollBy({ top: delta, behavior: 'smooth' })，而非直接赋值scrollTop——后者绕过滚动引擎，无法触发scrollend，后续吸附链就断了 - 子项需是直接子元素，且每个都有唯一
data-index，方便定位 - 计算锚点用
el.getBoundingClientRect().top + window.scrollY，避免offsetTop受父级 transform / margin 干扰 - 吸附阈值建议设为视口高度的 30%：若当前滚动位置离某子项顶部距离
< 0.3 * window.innerHeight，就吸附过去
处理 iOS Safari 手势冲突和回弹干扰
iOS Safari 在 fallback 场景下极易因 touch 事件拦截导致吸附失灵，常见表现是“划一下就停，再划才动”。必须同步做三件事：
立即学习“前端免费学习笔记（深入）”；
- 滚动容器上加
touch-action: pan-y（纵向）或touch-action: pan-x（横向），禁用默认手势接管 - 移除所有对
touchstart或touchmove的preventDefault()调用——哪怕只在某个模块里写了，也会全局禁用 snap - 设置
overscroll-behavior-y: contain（或x），防止滚动到边界时触发橡皮筋回弹，干扰位置判断
为什么不能用 requestAnimationFrame 轮询 scrollTop？
看似直观，实则高风险：
- 在快速滑动过程中，
scrollTop可能每帧变化几十像素，轮询频率跟不上，校准时机错位 - Android WebView 中
requestAnimationFrame在滚动期间可能被节流甚至暂停，导致吸附延迟 >500ms - 与原生
scrollend事件竞争：JS 校准刚执行完，浏览器又自己滚了一段，造成“来回抖动” - 真机测试表明，仅依赖轮询的方案在 iOS 15.2 上吸附失败率超 60%，而基于
scrollend+getBoundingClientRect的组合失败率低于 5%
最易被忽略的是：JS fallback 必须等原生 scrollend 触发后再启动校准，而不是一检测到滚动就冲上去干预——用户手指还没抬起来，JS 就强行滚动，体验比没吸附还差。
