移动端轮播图必须用 mandatory，它强制每次滚动结束都对齐到最近吸附点，确保页码确定性；proximity 仅适合长内容列表。
因为浏览器原生接管了滚动结束时的定位逻辑，省掉了 JavaScript 手动计算位移、速度、边界和动画的整套流程，既减少卡顿，又避免快速滑动跳页或停在半途。
scroll-snap-type: mandatory 还是 proximity？
移动端轮播图必须用 mandatory。它强制每次滚动结束都对齐到最近的吸附点，否则手指一松就可能卡在两个 .carousel-item 中间——用户根本没法判断当前在哪一页。
proximity 只适合长内容列表（比如文档阅读器），它依赖“是否接近”来决定是否吸附，而移动端轮播需要的是确定性停靠。
-
mandatory：适合全屏轮播、分步表单、横向卡片流 -
proximity：适合无限滚动列表、文章分页，但需配合足够大的子元素间距 - 注意：iOS Safari 对
proximity的触发阈值较敏感，容易不吸附，mandatory兼容性更稳
scroll-snap-align: start / center / end 怎么选？
取决于你的容器尺寸和内容排版意图：
- 全屏轮播（每个 item 占满 viewport）：用
scroll-snap-align: center最直观，视觉中心即逻辑中心 - 顶部固定导航栏 + 轮播区域：用
scroll-snap-align: start，让 item 顶部对齐容器顶部，避开 header 遮挡 - 底部操作栏场景：
scroll-snap-align: end可确保关键按钮始终可见，但需注意容器高度不能小于 item 高度 - 不要混用：同一容器内所有子元素的
scroll-snap-align值应一致，否则吸附行为不可预测
为什么设置了 scroll-snap-type 却没吸附？
最常见的三个原因：
- 滚动容器没设
overflow-x: scroll（或overflow-y: scroll），且没触发滚动上下文 ——scroll-snap-type只在可滚动容器上生效 - 子元素没设
flex: 0 0 100%或width: 100vw，导致宽度不足，浏览器找不到明确的吸附边界 - 父级或祖先元素有
overflow: hidden，把滚动能力截断了；尤其 Vue/React 中嵌套组件时，容易漏查中间层的 overflow 设置 - 额外提示：iOS 需加
-webkit-overflow-scrolling: touch启用手势惯性，否则吸附响应迟钝
Vue3 中如何避免 reactive 数据更新破坏 scroll snap？
直接用 v-for 渲染轮播项时，如果数组被替换（如 items = [...newItems]），DOM 会批量重绘，滚动位置丢失，吸附点临时失效。
- 改用
key稳定子元素：给每个.carousel-item加唯一key，比如:key="item.id" - 避免整个数组替换：用
push/splice局部更新，或用ref+shallowRef控制响应性粒度 - 滚动容器本身不要绑定
v-if，否则销毁重建会清空 scroll offset - 如果必须动态增删，可在 DOM 更新后手动调用
el.scrollLeft = targetOffset补位，但优先走 CSS 方案
真正难的不是写对那三行 CSS，而是确认滚动容器的 overflow 是否真实生效、子元素是否真的“撑满”了吸附所需的空间、以及嵌套结构里有没有某一层悄悄吃掉了滚动能力——这些细节不排查清楚，scroll-snap-type 就只是个摆设。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
