必须同时使用 flex: 0 0 100%、scroll-snap-align: start 和 overflow-x: auto，缺一则 iOS Safari 与 Android Chrome 下滚动不吸附；因 flex-shrink 默认为 1 会导致子项缩窄，使 scroll-snap 基准偏移，而 start 比 center 容错率更高，且需配合 touch-action: pan-x 和 scroll-snap-type: x mandatory 才生效。
必须用 flex: 0 0 100% + scroll-snap-align: start + overflow-x: auto 三者联动，缺一不可；否则 iOS Safari 和 Android Chrome 下大概率“能滑但不吸附”。
为什么 flex 布局下轮播项会缩窄导致吸附失效？
Flex 默认允许子项收缩（flex-shrink: 1），当容器宽度略小于子项总宽（比如因滚动条占位、缩放、或 100vw 计算偏差），浏览器会压缩每个子项——结果是总可滚动距离变短，scroll-snap-align 的停靠基准漂移，松手后卡在两页之间。
- 必须显式写
flex: 0 0 100%：第一个0禁用放大，第二个0禁用缩小，100%指宽度占满父容器 - 额外加
flex-shrink: 0更保险，尤其在旧版 Safari 中 - 别用
width: 100vw——iOS Safari 滚动条出现时会触发 1px 宽度突变，width: 100%更稳
scroll-snap-align: start 和 center 的实际表现差异
scroll-snap-align: center 要求子项宽度严格等于容器宽度，且所有 padding/margin/border 都得精确对齐，任意偏差都会让吸附点偏移。而 start 只依赖子项左边缘与容器左边缘对齐，容错率高得多。
- 横向轮播统一用
scroll-snap-align: start，配合flex-direction: row和默认direction: ltr -
center在横竖屏切换、页面缩放、或使用zoom时极易失准，真机测试中失败率明显更高 - 若真需居中视觉效果，可用
padding-left或伪元素微调内容位置，而非靠scroll-snap-align强撑
移动端 touch-action 是绕不过去的硬开关
iOS Safari 和 Android Chrome 120+ 默认拦截 touch 事件做手势优化，不显式放开就根本不会触发 scroll-snap 的吸附逻辑——表现为“拖不动”“松手回弹”“一滑跳两页”。
立即学习“前端免费学习笔记（深入）”；
- 只给滚动容器加
touch-action: pan-x（横向）或pan-y（纵向），不要加pinch-zoom等组合值 -
-webkit-overflow-scrolling: touch已废弃，现代 iOS 不仅不需要，留着还可能和原生 snap 冲突 - 真机调试时务必打开 Safari Web Inspector → Timelines → 查看是否触发
ScrollStart/ScrollEnd，不能只靠肉眼判断是否“吸附”
最易被忽略的是：容器本身必须“活”起来——overflow-x: auto、固定宽度、scroll-snap-type: x mandatory 这三项必须同时存在且生效，少一个，整个机制就静默退出，连报错都不会有。
