scroll-snap-type 仅控制滚动停靠位置，不驱动轮播；吸附失效主因是容器不可滚动或子项未设 scroll-snap-align。它必须写在实际横向滚动的容器（如 overflow-x: auto 的 .carousel）上，且需同时满足：overflow-x: auto、固定宽度（如 100%）、内容总宽大于容器宽；子项须显式设 scroll-snap-align: start 并用 flex: 0 0 100%；自动轮播须用 scrollby 而非直接改 scrollleft，并监听 scrollend。
scroll-snap-type 本身不驱动轮播，只控制“停在哪”；吸附失效几乎全是容器不可滚动或子项未声明锚点导致的静默失败。
scroll-snap-type 必须写在可滚动容器上，不是 .slide 或 wrapper
常见错误是把 scroll-snap-type: x mandatory 加在轮播项（如 .slide）或最外层布局容器（如 .carousel-wrapper）上。它只对**实际发生横向滚动的容器**生效，比如设置了 overflow-x: auto 的 .carousel 元素。DevTools 中能看到声明但 computed styles 里 scroll-snap-type 为空，基本就是写错位置了。
容器必须同时满足三个硬性条件才能触发吸附
缺一不可，否则 scroll-snap 完全静默，不报错也不警告：
-
overflow-x: auto（不能是hidden、visible或scroll） - 固定宽度：推荐
width: 100%或width: 100vw，避免 iOS Safari 滚动条占位偏移；用100dvh替代100vh更稳 - 内容总宽 > 容器宽度：例如 3 个
.slide各占100vw，总宽至少300vw，否则无滚动空间
每个子项必须显式设 scroll-snap-align，且尺寸稳定
scroll-snap-align 是吸附的“开关”，不是可选项。不设它，mandatory 也形同虚设：
- 横向轮播优先用
scroll-snap-align: start（等价于start start），比center center更兼容 iOS Safari，避免横竖屏切换后偏移 - 子项推荐
flex: 0 0 100%+flex-shrink: 0，比width: 100vw抗缩放、抗滚动条干扰 - 禁用
margin分隔子项——会导致可滚动距离 ≠ 视口单位，松手后卡在两页之间 -
scroll-snap-align只对滚动容器的**直接子元素**生效，中间多套一层 div 就失效
自动轮播必须用 scrollBy，不能直接改 scrollLeft
手动拖动能吸附，但 JS 自动滚动失灵？大概率是用了错误方式：
- ❌ 错误：
el.scrollLeft = nextPos—— 绕过滚动引擎，scroll-snap完全不响应 - ✅ 正确：
el.scrollBy({ left: width, behavior: 'smooth' })—— 浏览器会尊重吸附逻辑并停准 - 监听
scrollend事件判断是否停稳，再启动下一次滚动；iOS Safari 中这是防止连划跳页的关键 - 自动间隔建议 ≥3s，避免手动滑动后定时器冲突导致“卡半屏”
最容易被忽略的是：容器是否真正可滚动。样式全对，但 overflow-x: auto 没生效（比如父级 display: flex 没设 flex-direction，或子项总宽 ≤ 100vw），scroll-snap 就彻底静默——它不报错，也不警告，只是什么也不做。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
