scroll-snap 无过渡效果，需结合 scrollend 事件与 intersectionobserver 实现视觉过渡；必须设置 overscroll-behavior-x: contain 防止 ios 回弹干扰，且 scroll-snap-align 必须用双值（如 center center）并确保容器有滚动空间。
scroll-snap 本身不提供“过渡”效果
scroll-snap 是滚动定位机制，不是动画系统。它只控制滚动停止后停在哪，不负责中间过程的视觉变化。scroll-snap-type 和 scroll-snap-align 都不接受时间、缓动或渐变参数——所谓“吸附过渡”，其实是把两个独立能力混在一起了：吸附靠 CSS，过渡靠别的手段。
想让滑动结束时有视觉过渡，得用 scrollend + IntersectionObserver
直接给 scroll-snap 加 transition 没用，因为滚动位置（scrollLeft/scrollTop）本身不触发 CSS 过渡；浏览器也不会对“吸附完成”这个状态发 CSS 类名变更。
- 监听
scrollend事件判断当前停在哪个子项（注意 iOS Safari 15.4+ 才稳定支持） - 用
IntersectionObserver监听每个.slide的可见性，比手动计算getBoundingClientRect()更可靠、更轻量 - 根据当前活跃项动态切换
body或容器的 class，再用 CSStransition: background-color 0.4s ease实现颜色渐变 - 避免把 transition 加在
scroll-snap-align相关元素上——它们不参与样式重绘周期
移动端必须加 overscroll-behavior-x: contain
否则 iOS 的橡皮筋回弹会让 scrollend 触发两次，或根本没触发，导致过渡错位或卡住。这个值不支持旧版 Android WebView，但只要目标是现代 iOS/Android，它是刚需：
.carousel {
overflow-x: auto;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
overscroll-behavior-x: contain;
}
漏掉 overscroll-behavior-x: contain，哪怕 JS 和 CSS 全对，过渡也大概率在真机上失步。
scroll-snap-align 写错值会导致吸附点偏移，进而让过渡锚点错乱
常见错误是写成 scroll-snap-align: center（单值），这在规范里是无效声明，浏览器会忽略。必须写双值：scroll-snap-align: center center，否则 Safari 可能按 start 对齐，而 JS 认为你停在中心——两边基准不一致，过渡就对不上。
-
scroll-snap-align: start→ 对齐容器顶部，适合垂直分屏 -
scroll-snap-align: center center→ 水平轮播必须用这个 - 所有子项宽度要严格一致（如
width: 100vw），不能靠 margin/padding 调位置
最易被忽略的是：吸附是否真正生效，完全取决于容器有没有实际滚动空间。哪怕样式全对，只要子项总宽 ≤ 100vw，scroll-snap-type 就静默失效——它不报错，也不警告，只是过渡永远找不到正确锚点。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
