scroll-snap-type 必须设在滚动容器上且容器需满足溢出条件，子项须为直接子元素并用 scroll-snap-align 控制锚点，三者缺一不可。
横向滚动加 snap 吸附，关键不是“怎么写样式”，而是“容器和子项的尺寸、滚动行为、对齐锚点三者必须咬合”。写错任意一环，scroll-snap-type 就像没装电池的遥控器——按了没反应。
scroll-snap-type 必须设在滚动容器上，不是子元素
很多人把 scroll-snap-type: x mandatory 写在每个卡片（.card）上，结果滚动完全不吸附。它只对**滚动容器本身**生效，比如一个 div.scroll-container。
- 容器必须有明确滚动能力：
overflow-x: auto或overflow-x: scroll，且内容总宽度 > 容器宽度 - 不能只写
scroll-snap-type就完事——如果容器高度/宽度没撑开、没溢出，浏览器根本不会触发滚动，snap 自然无效 - 移动端 Safari 对
mandatory支持最稳；proximity在 iOS 上容易失效，别依赖
子元素必须是直接子项，且用 scroll-snap-align 控制锚点
scroll-snap-align 只对滚动容器的**直接子元素**起作用，孙子节点、伪元素、position: absolute 脱离文档流的元素都不响应。
- 横向滚动常用
scroll-snap-align: center，让卡片中心对齐视口中心 - 如果用
start，表示该子项的**左侧边缘**对齐容器左边缘——适合首屏对齐或左对齐导航条 - 不要混用
start和end在同一容器的不同子项里，行为不可预测 - 子项若有
margin或padding，会参与对齐计算，导致视觉偏移；建议统一用box-sizing: border-box并清空默认边距
Flex 布局下横向滚动 + snap 的典型配置
Flex 是目前最可控的横向滚动方案，比 white-space: nowrap 更语义化、更易调试。
- 容器设：
display: flex; flex-wrap: nowrap; overflow-x: auto;，再加scroll-snap-type: x mandatory; - 子项设：
flex: 0 0 auto;（不缩放、不拉伸、按内容宽），并显式加scroll-snap-align: center; - 子项宽度不能被
width: 100%或max-width: 100%锁死，否则所有子项都压缩成容器宽，无法溢出 → 滚动失效 - 移动端需加
-webkit-overflow-scrolling: touch;启用惯性滚动（iOS Safari 必需）
为什么滚动后没停准？常见偏移原因
即使代码全对，真机测试时仍可能停在两个卡片中间——这不是 bug，是 WebKit 滚动引擎的惯性策略，尤其当子项高度/宽度不一致、或含异步加载内容时。
- 快速滑动后松手，Safari 可能停在非 snap 点，这是设计行为，不是失效
- DevTools 的 “scroll snap” 可视化面板（如 Chrome 的 Layout > Scroll Snap）常不准，应以实际滚动停顿或
getComputedStyle(el).scrollSnapAlign为准 - 若需绝对精准停靠，得监听
scrollend事件 + JavaScript 手动修正（但scrollend在旧版 Safari 不支持） - 避免在
position: sticky或含transform的子项上叠加 snap，兼容性风险高
真正卡住人的从来不是语法，而是「容器有没有真正滚动起来」和「子项是不是那个被 snap 的直接孩子」——这两点漏查，后面所有样式都是白调。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
