css scroll-snap 实现移动端轮播图需满足三条件：容器可滚动、子项尺寸稳定、吸附声明完整；scroll-snap-type 必须设在滚动容器（如 .carousel）而非 body；需配合 overflow-x: auto、固定宽高、scroll-snap-type: x mandatory、子项 scroll-snap-align: start、flex: 0 0 100%、flex-shrink: 0、无 margin，并添加 touch-action: pan-x；禁用 -webkit-overflow-scrolling；js 切换应使用 scrollintoview 或 scrollto，监听 scrollend 事件同步页码。
CSS scroll-snap 能做出真正可用的移动端轮播图，但必须满足三个硬性条件：容器可滚动、子项尺寸稳定、吸附声明完整。缺一不可，否则在 iOS Safari 或 Android WebView 里大概率静默失效。
scroll-snap-type 写在哪？为什么写在 body 上基本没用
必须写在实际发生横向滚动的容器元素上，比如 .carousel，而不是 html 或 body。根元素被浏览器 UA 样式和系统手势策略深度接管，scroll-snap-type 在这里会被忽略。
关键配置要一起出现：
-
overflow-x: auto（不是hidden或visible） -
width或height为固定值（如width: 100vw或height: 100vh），不能靠内容撑开 -
scroll-snap-type: x mandatory（proximity在快速滑动时容易失焦）
每个轮播项必须设 scroll-snap-align:start，别用 center
iOS Safari 对 scroll-snap-align: center 的实现存在偏移问题，尤其在横竖屏切换或缩放后，吸附位置会漂移。实测中 start 是最稳的选择。
配合以下子项样式才能真正对齐：
-
flex: 0 0 100%（比width: 100vw更抗滚动条占位和缩放干扰） -
flex-shrink: 0（防 Flex 布局下被压缩变窄） - 禁止用
margin分隔子项（会导致可滚动距离 ≠ 视口单位，吸附点错位）
移动端 touch 滚动不生效？缺 touch-action 和真机验证
iOS Safari 和 Android Chrome 120+ 默认拦截 touch 事件以优化手势识别，不显式放开就会绕过 scroll snap 逻辑。
必须加：
- 横向轮播容器加
touch-action: pan-x - 纵向全屏滚动加
touch-action: pan-y - 删掉已废弃的
-webkit-overflow-scrolling: touch（现代 iOS 不仅不需要，留着还可能冲突）
模拟器常无法复现吸附延迟或跳页问题，务必连真机用 Safari Web Inspector 查看 Timeline 中是否触发 ScrollStart/ScrollEnd 事件。
JS 控制切换时别直接改 scrollLeft
直接赋值 container.scrollLeft = x 在高 DPI 屏、缩放页面或 Safari 下极易失步——计算出的像素和实际 snap 点对不上。
正确做法是让浏览器自己找锚点：
- 用
slideEl.scrollIntoView({ block: 'nearest', inline: 'start' }) - 或调用
container.scrollTo({ left: targetX, behavior: 'smooth' }) - 监听
scrollend事件判断切换完成（不支持时可用getBoundingClientRect()轮询）
scroll-snap 本身不暴露当前页码，状态同步得靠 JS 自己算，这点容易被忽略。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
