scroll-snap-type 本身不提供自动轮播，仅控制滚动结束后的精准吸附；必须用 js 的 scrollby 驱动滚动，且 scroll-snap-type: x mandatory 必须设在 overflow-x: auto 的可滚动容器上，配合每个子项 scroll-snap-align: center center 才能生效。
scroll-snap-type 本身不提供“自动轮播”，只负责滚动结束后的精准吸附；要实现轮播图的自动吸附效果，必须靠 JS 驱动滚动，但吸附行为完全由 scroll-snap-type 和 scroll-snap-align 控制——写错位置或参数，吸附就彻底失效。
scroll-snap-type 必须写在可滚动容器上，且值为 x mandatory
这是吸附生效的硬性前提，不是装饰性样式。常见错误是把它加在轮播项（如 .slide）或外层布局 wrapper 上，结果 DevTools 里能看到声明，但 computed styles 中 scroll-snap-type 值为空。
-
scroll-snap-type: x mandatory必须设在设置了overflow-x: auto的容器上 - 用
proximity会导致快速滑动时跳过目标项，mandatory才能保证每次滚动都停准 - 容器宽度必须严格大于视口（例如子项总宽 > 100vw），否则无滚动空间，吸附不触发
每个轮播项必须设 scroll-snap-align: center center，且尺寸一致
吸附点由子元素自己声明，浏览器不会推断。只居中内容、不设对齐锚点，等于没开吸附开关。
-
scroll-snap-align: center是无效写法，必须写成双值scroll-snap-align: center center - 所有
.slide推荐统一用width: 100vw和min-height: 100dvh，避免 Safari 吸附偏移 - 禁止在
.slide上用margin或padding调整位置——这些会干扰吸附基准，改用 flex 内部居中
自动滚动必须用 scrollBy，不能直接改 scrollLeft
绕过滚动引擎的操作（比如赋值 element.scrollLeft）会让 scroll-snap 完全失灵，吸附逻辑只响应原生滚动行为。
- 用
element.scrollBy({ left: width, behavior: 'smooth' })触发，浏览器会尊重scroll-snap并吸附到下一帧 - 监听
scrollend事件判断是否停稳，再启动下一次滚动——这是 iOS Safari 中防止连划跳页的关键 - 自动间隔建议 ≥3s，否则手动滑动后 JS 定时器可能冲突，造成“卡半屏”
最容易被忽略的是：容器是否真正可滚动。哪怕样式全对，只要 overflow-x: auto 没生效（比如父级 display: flex 未设 flex-direction，或子项总宽 ≤ 100vw），scroll-snap 就彻底静默——它不报错，也不警告，只是什么也不做。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
