scroll-snap本身不支持自动轮播，仅负责滚动结束后的精准吸附；自动滚动需js驱动，但吸附仍依赖容器上scroll-snap-type:x mandatory及子项scroll-snap-align:center center，且须确保overflow-x:auto、尺寸一致、无干扰边距。
scroll-snap 本身不支持“自动轮播”，它只负责滚动结束后的精准吸附；所谓“自动”必须靠 JS 或 CSS animation 驱动滚动，但吸附逻辑仍由 scroll-snap-type 和 scroll-snap-align 控制。
scroll-snap-type 必须写在可滚动容器上，且值为 x mandatory
这是吸附生效的前提，不是装饰性属性。写错位置（比如加在 .slide 上）或用 proximity 会导致吸附失效或飘忽不定：
-
scroll-snap-type: x mandatory必须设在设置了overflow-x: auto的容器上，不能是父级布局容器或中间 wrapper - 用
mandatory而非proximity：后者在快速滑动时可能跳过目标项，mandatory才能保证每次滚动都停准 - 容器宽度必须严格大于视口（如
width: max-content或多个100vw子项），否则无滚动空间，scroll-snap彻底不触发
每个轮播项必须设 scroll-snap-align: center，且尺寸一致
吸附点由子元素自己声明，浏览器不会推断。常见错误是只居中内容却忘了对齐锚点：
-
scroll-snap-align: center是无效写法，必须写成scroll-snap-align: center center（双值） - 所有
.slide必须有相同宽度（推荐width: 100vw），高度也建议统一（如min-height: 100dvh），否则 Safari 可能吸附偏移 - 避免在
.slide上用margin或padding调整位置——这些会干扰吸附基准，改用flex或grid内部居中
自动滚动需额外驱动，但不能破坏 scroll-snap 的原生行为
纯 CSS 的 @keyframes + scroll-behavior 不可行；JS 触发滚动才是可靠路径：
- 用
element.scrollBy({ left: width, behavior: 'smooth' })触发，浏览器会尊重scroll-snap并吸附到下一帧 - 避免直接改
scrollLeft：绕过滚动引擎，scroll-snap不响应 - 监听
scrollend事件判断是否停稳，再决定是否下一张——这是 iOS Safari 中防止连划跳页的关键 - 自动轮播的间隔要留足（≥3s），否则快速手动滑动后 JS 定时器可能冲突，造成“卡半屏”
移动端真机测试必须包含 Safari 和低端 Android
scroll-snap 在各平台表现差异明显，文档没写的坑往往出现在这里：
- iOS Safari 对
mandatory的惯性处理较保守，快速连划可能停不准——加scroll-behavior: smooth可缓解，但不能根治 - 部分 Android WebView（尤其旧版 Chrome）不支持
scrollend，需降级为setTimeout+getScrollInfo模拟 - 用
100dvh替代100vh：Safari 地址栏收放会导致高度跳变，dvh是唯一稳定方案 - 不要嵌套
position: sticky或transform父容器——WebKit 会丢掉 scroll-snap 上下文，吸附直接失效
真正难的不是写出能跑的代码，而是让每张图在任意设备、任意手势下都停得严丝合缝。这需要把 scroll-snap-align 当作物理锚点来校准，而不是样式修饰。一旦尺寸、滚动流、吸附轴向三者没对齐，再多的 JS 补丁也救不回那半像素的偏移。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
