scroll-snap-align 单独使用无效，必须配合父容器的 scroll-snap-type 才能生效；需确保父容器有 overflow: auto/scroll 且设了 scroll-snap-type: x mandatory 等声明。
scroll-snap-align 不生效？先检查父容器有没有 scroll-snap-type
直接说结论：scroll-snap-align 单独写在子元素上完全没用，它必须配合父容器的 scroll-snap-type 才能触发对齐行为。
常见错误现象是：给 .slide 加了 scroll-snap-align: center，滚动时却毫无反应——大概率是忘了在它的滚动容器（比如 .carousel）上设 scroll-snap-type: x mandatory 或类似声明。
-
scroll-snap-type必须作用于有滚动行为的父元素（overflow: auto/scroll），不能写在 body 或无溢出的容器上 - 值推荐用
mandatory（强制对齐），proximity在快速滑动时容易“跳过”对齐点 - 方向要匹配：横向滚动用
x，纵向用y，别写成block或inline（虽合法但兼容性差）
scroll-snap-align 的取值逻辑和常见误用
scroll-snap-align 控制的是「当前元素哪一部分」去对齐「滚动容器的哪一部分」，不是控制滚动停在哪——这个对齐基准由父容器的 scroll-snap-type 决定。
它接受两个关键字：scroll-snap-align: [x-axis] [y-axis]，常用组合只有三个：
立即学习“前端免费学习笔记（深入）”；
-
scroll-snap-align: start→ 元素的起始边（左/顶）对齐容器起始边 -
scroll-snap-align: center→ 元素中心对齐容器中心 -
scroll-snap-align: end→ 元素结束边（右/底）对齐容器结束边 - 写单值如
center等价于center center；写start end表示水平对齐起点、垂直对齐终点
容易踩的坑：scroll-snap-align: center 在 flex 容器中可能失效，因为 flex 项默认 align-self: auto，会覆盖 snap 对齐；显式加 align-self: center 或改用 scroll-snap-align: start 更稳。
移动端 Safari 滚动卡顿或对齐偏移？检查 overflow 和 transform
iOS Safari（尤其是旧版本）对 scroll-snap-align 的实现比较敏感，稍不注意就出现滚动卡顿、对齐位置漂移，甚至整个 snap 失效。
- 确保滚动容器有明确的
width或height，且overflow设为auto或scroll（hidden不行） - 避免在滚动容器或其子元素上使用
transform: translateZ(0)或其他硬件加速 hack，它们会干扰 snap 计算 - 如果用了
will-change: transform，务必删掉——Safari 会因此放弃 snap 对齐 - 滚动容器不要嵌套在
position: fixed或position: sticky元素里，否则部分 iOS 版本会丢掉 snap 上下文
scroll-snap-align 和 scroll-margin 冲突怎么办
scroll-margin 是用来“微调”对齐位置的，但它和 scroll-snap-align 不是叠加关系，而是优先级更高：只要设置了 scroll-margin，浏览器就会用它重新计算对齐基准点，scroll-snap-align 只负责指定“用哪个边/中心”去对齐那个新基准点。
典型场景：导航栏固定在顶部，滚动到某个 section 时想让标题避开被遮挡。这时你会写：
.section {
scroll-snap-align: start;
scroll-margin-top: 64px;
}
意思是：“用这个 section 的顶部，去对齐滚动容器可视区顶部往下 64px 的位置”。
-
scroll-margin值不能为百分比（只支持 px、rem、em 等绝对单位） - 如果同时设了
scroll-margin-top和scroll-margin-bottom，浏览器按需选用（比如向上滚动时看 top，向下看 bottom） - 别在同一个元素上混用
scroll-margin和 JS 的scrollIntoView({ block: 'start', offset: ... })，行为不可预测
真正难搞的是多层嵌套滚动 + 不同方向 snap，这时候对齐点会层层传导，一个 scroll-margin 改动可能影响三四个层级——得靠 DevTools 的 “Rendering” 面板勾选 “Scroll snapping” 实时看对齐线，不然纯靠猜。
