scroll-snap-align 的合法取值为 start、end、center、none，且必须成对出现（如 center center），单值无效；none 用于禁用某轴吸附。
scroll-snap-align 的合法取值有哪些
scroll-snap-align 只接受两个方向的对齐关键词：start、end、center，且必须成对出现（水平 + 垂直），例如 scroll-snap-align: center center。单写一个值（如 scroll-snap-align: center）是无效的，浏览器会忽略整条声明。
常见错误是只写一个方向，比如想让元素居中吸附却写了 scroll-snap-align: center，结果完全不生效；正确写法必须明确指定两个轴：scroll-snap-align: center center 表示在滚动容器的主轴和交叉轴上都以该元素的中心为锚点。
-
start对应元素盒模型的border-box起始边（水平滚动时是 left，垂直滚动时是 top） -
end对应结束边（right / bottom） -
center对应盒模型中心点 - 若某方向不需要吸附（比如只希望水平吸附、垂直自由滚动），对应位置填
none，如scroll-snap-align: center none
为什么设置了 scroll-snap-align 却没吸附效果
吸附失效绝大多数是因为父容器缺少关键前提：没有设置 scroll-snap-type，或设置了但值为 none。即使所有子项都写了 scroll-snap-align: center center，只要容器没声明 scroll-snap-type: x mandatory（或 y mandatory），吸附就完全不会触发。
另一个高频坑是容器未启用滚动——scroll-snap-type 只在可滚动容器上起作用。如果容器高度/宽度足够容纳全部内容（即无溢出），overflow 未设为 auto 或 scroll，那么 scroll-snap-align 就是纯装饰。
立即学习“前端免费学习笔记（深入）”；
- 必须同时满足三个条件：容器有
overflow-x或overflow-y为auto/scroll、设置了scroll-snap-type（且不为none）、子项设置了有效的scroll-snap-align -
scroll-snap-type的第二个参数用mandatory还是proximity很关键：mandatory强制最终停在吸附点，proximity仅在靠近时才吸附，松手后可能滑走 - 注意：Firefox 对
scroll-snap-type: both mandatory支持不稳定，建议明确指定单轴，如scroll-snap-type: x mandatory
scroll-snap-align 和 scroll-margin 的配合关系
scroll-snap-align 定义“以元素哪部分为锚点”，而 scroll-margin 定义“这个锚点最终要对齐到容器哪个位置”。二者是协作关系，不是替代关系。比如你想让卡片的顶部距离容器顶部留出 20px 间隙再吸附，不能靠改 scroll-snap-align 实现，得加 scroll-margin-top: 20px。
典型误用是试图用 scroll-snap-align: start 模拟顶部留白，结果整个卡片被顶到容器最顶边。正确做法是保持 scroll-snap-align: start start，再用 scroll-margin-top 推开距离。
-
scroll-margin作用于设置了scroll-snap-align的元素本身，值会从该元素盒模型边界向内缩进，作为吸附参考偏移 - 支持四个方向独立设置：
scroll-margin-top、scroll-margin-left等，也可简写为scroll-margin: 10px 20px - 注意：不要和
margin混淆——scroll-margin不影响布局流，只影响吸附计算
在 Flex/Grid 容器中使用 scroll-snap-align 的注意事项
当滚动容器是 display: flex 或 display: grid 时，scroll-snap-align 依然有效，但需特别注意主轴方向是否与滚动方向一致。例如容器设了 flex-direction: column 且 overflow-y: auto，那 scroll-snap-align: start start 中第一个 start 就对应 flex 主轴（即 top），第二个 start 对应交叉轴（即 left）。
更大的陷阱来自 Grid 的隐式轨道。如果子项被放在非显式定义的网格区域（比如用 grid-area 越界），其盒模型可能受 grid 自动行高/列宽影响，导致 scroll-snap-align: center center 吸附位置偏移。此时建议显式设置 grid-auto-rows 或用 min-height 固定项高。
- Flex 容器中，确保
align-items不是stretch（否则子项高度被拉满，center吸附可能失准） - Grid 容器中，避免依赖
grid-template-areas的自动填充行为来控制吸附项尺寸 - 移动端 Safari 对 flex 容器内的 scroll-snap 支持较弱，必要时可降级为 block 布局 +
white-space: nowrap模拟横向滚动
真正难调的不是语法，而是滚动容器的溢出判定、子项盒模型边界、以及 scroll-margin 与 padding/border 的叠加效果——这些细节不打出来看渲染树根本没法猜。动手前先用 DevTools 检查滚动容器的 getComputedStyle 里 scroll-snap-type 是否生效，再逐个验证子项的 scroll-snap-align 值是否被解析为有效关键词。
