scroll-snap 不生效主因是父容器缺显式宽度、未设 white-space: nowrap 且 scroll-snap-type 未配对 overflow-x；子项须设 scroll-snap-align: start/center，禁用 flex:1 和绝对定位；移动端需加 scroll-behavior: smooth 及兼容处理。
直接用 overflow-x: auto 加 scroll-snap-type 就能做出流畅、对齐精准的横向滑动列表，但多数人卡在容器尺寸、子项约束和 snap 行为不触发这三处。
为什么 scroll-snap 不生效？常见容器设置漏项
最常被忽略的是父容器必须显式定义 width 或 inline-size，且不能是 fit-content 或未设限制的 auto。同时需禁用默认换行和溢出截断：
-
white-space: nowrap防止子项折行（哪怕 display 是 flex） -
scroll-snap-type: x mandatory必须写在父容器上，且方向要和 overflow 一致（x 对应 overflow-x） - 父容器需有明确的块级尺寸约束，例如
width: 100%或max-width: 600px，否则 scroll-snap 无参考基准
子项如何设置 scroll-snap-align？对齐逻辑与常见误用
scroll-snap-align 控制每个子项“停靠点”的位置，默认是 none，必须显式设为 start、end 或 center 才会响应 snap。横向列表一般用 scroll-snap-align: start（左对齐）或 center（居中）：
- 若用
start，子项左边缘会严格对齐容器左边界，适合卡片左对齐场景 - 若用
center，子项中心点对齐容器中心，但需确保子项宽度固定，否则滚动锚点会漂移 - 不要给子项设
flex: 1或width: 100%同时又期望它独立 snap——这会让所有子项撑满容器，失去滑动意义
移动端 touch 滚动卡顿？关键兼容性补丁
iOS Safari 和部分 Android WebView 中，overflow-x: auto 默认不启用惯性滚动，需加 -webkit-overflow-scrolling: touch（仅 iOS 旧版）；现代方案则依赖 scroll-behavior: smooth 和更严格的尺寸控制：
- 务必为父容器添加
scroll-behavior: smooth，否则 snap 是硬切，体验生硬 - 避免在子项上使用
transform或position: absolute，它们可能破坏 snap 边界计算 - Android Chrome 120+ 对
scroll-snap-align: center的支持仍不稳定，建议 fallback 到start并用 padding 模拟居中视觉效果
真正难的不是写那几行 CSS，而是理解 scroll-snap 的锚点完全依赖于父容器的可滚动区域尺寸 + 子项的盒模型边界 —— 任何一处尺寸隐式坍缩（比如子项 margin 折叠、line-height 影响 inline 元素高度），都可能导致 snap 偏移或失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
