scroll-snap-type必须设在滚动容器上而非子项，因该属性仅对启用overflow的父容器生效；子项需设scroll-snap-align和scroll-snap-stop: always，并配合-webkit-overflow-scrolling: touch、overscroll-behavior-x: contain及严格viewport控制以确保移动端吸附稳定。
scroll-snap-type 必须设在滚动容器上，不是子项
很多人把 scroll-snap-type 写在滑动项（比如 .item）上，结果完全没反应。它只能作用于有滚动行为的父容器，比如 .carousel 或 div，且该容器必须启用滚动（overflow-x: auto 或 scroll）。
常见错误写法：.item { scroll-snap-align: start; } —— 这行有效，但前提是父容器已正确设置 scroll-snap-type；.item { scroll-snap-type: x mandatory; } —— 这行无效，浏览器直接忽略。
正确结构示例：
.carousel {
display: flex;
overflow-x: auto;
scroll-snap-type: x mandatory; /* 关键：必须在这里 */
scroll-behavior: smooth;
}
<p>.carousel > <em> {
scroll-snap-align: start; /</em> 子项对齐方式 */
flex-shrink: 0;
width: 100vw;
}</p>
移动端需禁用默认橡皮筋效果，否则吸附失效
iOS Safari 和部分 Android 浏览器在滚动到边界时会触发“回弹”（rubber banding），这会让 scroll-snap 失去锚定时机，导致滑一半卡住或跳过目标位置。
解决方法是加这两条：
-
-webkit-overflow-scrolling: touch（仅 iOS，提升滚动流畅度） -
overscroll-behavior-x: contain（阻止滚动穿透和回弹）
完整推荐样式：
.carousel {
overflow-x: auto;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
overscroll-behavior-x: contain;
}
注意：overscroll-behavior-x 在旧版 Android WebView 中不支持，如需兼容可加 JS fallback 检测。
scroll-snap-stop: always 能防止快速滑动跳过中间项
用户猛甩屏幕时，滚动惯性可能让容器直接越过多个 scroll-snap-align 锚点，只停在首尾。这不是 bug，而是浏览器默认允许“跳停”。
加 scroll-snap-stop: always 到每个子项，强制每次滚动只停一个 snap point：
.carousel > * {
scroll-snap-align: start;
scroll-snap-stop: always; /* 关键：阻止跳项 */
}
但要注意：
– 它在 Firefox 中支持较晚（≥103），Safari 16.4+ 才支持；
– 若项目数多、内容重，连续 stop 可能让滚动略显“顿挫”，需权衡体验。
真机调试时务必检查 viewport 缩放和 user-scalable
很多吸附失效的 case 其实和 CSS 无关，而是页面被缩放了。iOS Safari 在 viewport 中允许用户双指缩放，一旦页面被放大，100vw 就不再等于屏幕宽度，导致 scroll-snap-align 锚点错位。
确保 <meta name="viewport"> 设置严格：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
另外，某些安卓浏览器（如三星 Internet）会忽略 user-scalable=no，此时建议配合 JS 监听 touchmove 并 preventDefault() 做兜底。
吸附逻辑本身很轻量，但依赖精确的尺寸对齐。一旦视口或元素宽高因缩放/盒模型/字体加载产生微小偏差，snap 就会“漂移”——这点比兼容性更常被忽略。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
