能实现，但必须同时满足三个硬条件：容器可滚动、子项尺寸稳定、吸附声明完整。缺一不可，否则在 iOS Safari 或 Android WebView 里大概率静默失效。
能实现，但必须同时满足三个硬条件：容器可滚动、子项尺寸稳定、吸附声明完整。缺一不可，否则在 iOS Safari 或 Android WebView 里大概率静默失效。
scroll-snap-type 必须写在可滚动容器上，不是 body 或 wrapper
写在 body 或外层 .carousel-wrapper 上基本没用——根元素和非滚动上下文容器被浏览器 UA 样式深度接管，scroll-snap-type 声明会出现在 DevTools 的 Styles 面板里，但 computed styles 中值为空。
- 正确位置是实际发生横向滚动的容器，比如
.carousel，且它必须显式启用滚动上下文 - 必须配
overflow-x: auto（不能是hidden、visible或overflow: auto） - 容器宽度要固定，推荐
width: 100%而非100vw，避免 iOS Safari 滚动条占位导致 1px 偏移
子项必须设 scroll-snap-align:start 且防压缩
iOS Safari 对 scroll-snap-align: center 的实现存在吸附漂移问题，尤其横竖屏切换或缩放后；start 是目前最稳的选择，前提是子项左边缘对齐容器左边缘。
- 每个轮播项必须是滚动容器的直接子元素，嵌套一层
<div class="inner">就会让scroll-snap-align失效 - 用
flex: 0 0 100%+flex-shrink: 0控制宽度，比width: 100vw更抗缩放和滚动条干扰 - 禁止用
margin分隔子项——会导致可滚动距离 ≠ 视口单位，吸附点错位 - 加
touch-action: pan-x，否则 iOS 和新版 Android WebView 会拦截 touch 事件，绕过 snap 逻辑
mandatory 不等于“绝对强制”，快速滑动仍可能跳帧
scroll-snap-type: x mandatory 是吸附生效的前提，但它不控制滚动惯性。真机测试中，猛甩屏幕后松手，Safari 常停在两个吸附点之间——这不是 bug，是 WebKit 对滚动物理模型的妥协。
立即学习“前端免费学习笔记（深入）”；
- 补救方案：给每个子项加
scroll-snap-stop: always，强制每次滚动只停一个锚点 - JS 自动轮播必须用
element.scrollBy({ left: width, behavior: 'smooth' })，不能直接赋值scrollLeft，否则吸附逻辑完全失活 - 监听
scrollend事件判断是否停稳，再触发下一次滚动；间隔建议 ≥3s，避免手动滑动后定时器冲突造成“卡半屏”
最容易被忽略的其实是“容器到底能不能滚”
哪怕所有样式都写对了，只要子项总宽 ≤ 容器宽度（比如 flex: 0 0 100% 但只有 1 个子项），或者父级 display: flex 没设 flex-direction 导致子项换行，滚动空间就不存在，scroll-snap 就彻底静默——它不报错，也不警告，只是什么也不做。
真机调试时，先确认 overflow-x: auto 是否真正生效（滚动条出现、可拖动）、子项是否横向铺满、scroll-snap-align 是否在 computed styles 中可见。这三个点对了，吸附才真正开始工作。
