scroll-snap-type 在轮播图中失效的根本原因是父容器未设置 overflow 或子项未撑满容器宽/高；必须在滚动容器设 scroll-snap-type 和 overflow，子项需固定尺寸、总宽≥容器宽，并加 scroll-snap-align。
scroll-snap-type 在轮播图里为什么没反应
根本原因通常是父容器没设 overflow，或者子项没撑满容器高度/宽度。CSS 滚动捕捉不是“加了就生效”的开关，它依赖严格的布局条件。
-
scroll-snap-type必须写在滚动容器上（比如.carousel），且该容器需有明确的overflow-x: auto或overflow-y: auto - 每个轮播项（
.carousel-item）必须是块级、固定宽高，且总宽度 ≥ 容器宽度（横向轮播时），否则浏览器认为“无需滚动”，自然不触发捕捉 - 别忘了给子项加
scroll-snap-align: start（横向用start，纵向用center等），否则捕捉点默认是none
移动端 touch 滚动卡顿、跳过中间项
这是 scroll-snap-type 最典型的兼容性陷阱：iOS Safari 和部分安卓 WebView 对快速滑动的捕捉行为不一致，容易直接跳到第 3 项，跳过第 2 项。
- 加
scroll-behavior: smooth不能解决这个问题，它只影响 JSscrollTo()，不影响手势滚动 - 更可靠的做法是限制滚动速度：给容器加
-webkit-overflow-scrolling: touch（仅 iOS），并确保子项宽度严格等于容器宽度（不要用100vw，避免缩放干扰） - 如果业务允许，用
touch-action: pan-x防止误触发 vertical 滚动，减少干扰
如何用 JS 控制 scroll-snap 切换到指定项
不能直接改 scrollLeft 后就指望自动对齐——老版本 Safari 会忽略，而且没有过渡动画。得靠 scrollTo() + behavior: 'smooth' 组合。
- 先获取目标项的
offsetLeft（横向）或offsetTop（纵向），注意要减去容器scrollLeft偏移量 - 调用
container.scrollTo({ left: targetX, behavior: 'smooth' })，而不是scrollLeft = targetX - 监听
scrollend事件（非所有浏览器支持），比scroll更适合做“切换完成”判断；不支持时可用setTimeout+getBoundingClientRect()轮询
scroll-snap-type 和轮播自动播放冲突吗
不直接冲突，但自动播放逻辑容易被用户手动滚动打断，而且 scroll-snap 本身不提供“当前在哪一页”的状态，JS 得自己算。
立即学习“前端免费学习笔记（深入）”；
- 别用
setInterval强行scrollTo()，会导致用户正在拖拽时被突然拉走——先检查container.scrollLeft是否已稳定（比如 100ms 内没变）再执行 - 计算当前页：用
Math.round(container.scrollLeft / itemWidth)，但要注意小数误差，建议加Math.abs(... - Math.round(...)) 校验 - PC 上鼠标滚轮可能一次滚多页，
scrollend触发后立刻重置定时器，避免叠加
最麻烦的其实是 resize 场景：窗口缩放后 itemWidth 变了，但 scrollLeft 还是旧值，可能导致捕捉错位。resize 后最好强制重置到第一页，或重新计算并 scrollTo 最近对齐点。
