iOS Safari 中 scroll-snap-type 不生效，主因是容器未触发滚动上下文：需显式设置 overflow（非 hidden）和固定高度（如 100vh），避免 transform 等干扰属性。
scroll-snap-type 在 iOS Safari 上不生效？先检查容器溢出和高度
移动端 scroll-snap 失效，90% 是因为容器没触发滚动上下文。iOS Safari 对 scroll-snap-type 的启用条件比桌面严格得多：容器必须有明确的、非 auto 的 overflow，且自身要有可滚动的高度（不能靠内容撑开）。
-
overflow: auto或overflow-y: scroll必须显式设置，overflow: hidden会直接禁用滚动捕捉 - 容器需有固定高度（如
height: 100vh）或max-height，仅设min-height不够 - 避免父级有
transform、will-change或contain，这些在旧版 iOS 会破坏 scroll-snap 的滚动容器识别 - iOS 15.4+ 才完整支持
scroll-snap-align: center，之前版本只可靠start/end
scroll-snap-align=start 和 center 在安卓 WebView 行为不一致
安卓各厂商 WebView 对 scroll-snap-align 的实现差异大，尤其在内容块高度不固定时。用 center 容易导致“卡半格”或跳过目标项，根本原因是 snap 基准点计算依赖渲染完成后的布局尺寸，而部分 WebView 在滚动中延迟测量。
- 优先用
scroll-snap-align: start+ 子项设scroll-snap-stop: always，兼容性最稳 - 若必须居中对齐，给每个子项加固定
height（如height: 100vh），避免依赖内容高度动态计算 - 不要混用
scroll-snap-align: center和scroll-snap-stop: normal，后者会让快速滑动跳过中间项 - Chrome Android 112+ 支持
scroll-snap-stop: always，但 Samsung Internet 19 仍忽略该属性
滚动惯性导致 scroll-snap 捕捉失败？加 overscroll-behavior
用户猛甩屏幕时，滚动惯性可能冲过目标位置又回弹，看起来像“没吸住”。这不是 scroll-snap 失效，而是浏览器在 overscroll 区域（如页面边缘）触发了弹性滚动，干扰了 snap 点判定。
- 在滚动容器上加
overscroll-behavior: contain，阻止滚动传递和弹性效果 - 避免同时设置
scroll-behavior: smooth，它和 scroll-snap 在某些安卓机型上存在竞态，导致首次滚动不吸附 - 如果容器是全屏轮播，建议用
touch-action: pan-y禁用横向 touch 惯性（防止误触导致垂直滚动中断） - 测试时用真机“快速甩动”，模拟器的惯性参数和真实手指差异很大
React/Vue 中动态插入元素后 scroll-snap 失效
框架中通过 state 更新插入新子项，DOM 虽已挂载，但 scroll-snap 引擎未必立即重注册 snap 区域——尤其当新元素还没完成 layout（比如图片未加载完、字体未就绪）。
立即学习“前端免费学习笔记（深入）”；
- 确保新子项有明确宽高（用
aspect-ratio或占位图），避免 layout shift 导致 snap 锚点偏移 - 不要依赖
useEffect或mounted钩子立即调用scrollTo，应监听resize或使用requestAnimationFrame延迟一帧 - Vue 中用
v-for时，确保 key 稳定；React 中避免用索引作 key，否则 DOM 复用会混淆 snap 位置映射 - 极端情况可手动触发重计算：临时修改容器
scroll-snap-type值再设回原值（不推荐，仅调试用）
scroll-snap 的真正难点不在写法，而在它把“滚动行为”交给了浏览器底层合成器——这意味着你无法监听“吸附完成”事件，也无法精确干预过渡过程。任何依赖视觉反馈的交互（比如指示器同步），都得绕开 scroll-snap 自己实现。
