必须将scroll-snap-type与overflow-x:auto同时设在实际滚动容器上，且该容器须直接包含子项；旧版Chrome还需每个子项加scroll-snap-stop:always、设scroll-snap-align:start、容器加touch-action:pan-x，并避免transform等干扰属性。
scroll-snap-type 写在了错误容器上
移动端 Chrome（尤其 Android WebView 80–92）只对**实际发生滚动的容器**启用 snap 引擎。常见错误是把 scroll-snap-type: x mandatory 加在 .carousel-wrapper（display: flex 的父层）或 body 上，而真正设了 overflow-x: auto 的 .carousel 却没加该声明。DevTools 中能看到 CSS 声明，但 computed styles 里 scroll-snap-type 值为空，基本就是写错位置了。
必须确保：
-
scroll-snap-type和overflow-x: auto同时出现在同一个元素上 - 该元素是直接承载卡片子项的容器（即卡片是它的直接子元素）
- 避免套在
transform、position: fixed或will-change: transform的父元素里——旧版 WebKit 会跳过 snap 计算
子项没设 scroll-snap-align 或尺寸不稳
scroll-snap-align 是吸附的“开关”，不是可选项。不设它，mandatory 形同虚设。iOS Safari 对 center 支持不稳定，横竖屏切换后容易漂移；start 是最可靠的选择。
子项宽度必须严格匹配视口单位，否则总滚动距离失准，松手后卡在两页之间：
立即学习“前端免费学习笔记（深入）”；
- 用
flex: 0 0 100%+flex-shrink: 0，比width: 100vw更抗滚动条占位和缩放干扰 - 禁止用
margin-right分隔卡片——改用padding-right或负外边距抵消 - 确保内容总宽 ≥ 容器宽度 × 卡片数（例如 3 张卡，总宽至少 300%）
touch-action 缺失或值不正确
iOS Safari 和 Android Chrome 120+ 默认拦截 touch 事件以优化手势识别。不显式放开，scroll-snap 逻辑压根不参与，表现为拖不动、松手回弹、滑过两页。
横向滑块只需：
- 给滚动容器加
touch-action: pan-x - 不要写
pan-x pinch-zoom等多值组合——部分 WebView 会因此干扰双指缩放 - 删掉已废弃的
-webkit-overflow-scrolling: touch，留着可能冲突
旧版 Chrome 需要 scroll-snap-stop: always
Chrome 80–92（对应 Android 10–12 系统 WebView）对 scroll-snap-type 的实现是残缺的：它不会触发吸附动画，scroll 事件只在起止位置触发，scrollTop 始终为 0 或整屏跳变。
必须为每个卡片子项显式添加：
-
scroll-snap-stop: always—— 这是旧版内核的硬性开关，新版中可选，旧版中不可省 - 同时确保子项无
transform、position: absolute、flex: 1等破坏布局流的属性 - 若用了自定义滚动条（
::-webkit-scrollbar），避免与scroll-snap-type: y mandatory同时作用于非根元素，否则点击轨道会跳顶/跳底
真机测试时别只看视觉效果，连上 Safari Web Inspector 或 Chrome DevTools，看 Timeline 是否真实触发 ScrollStart/ScrollEnd 事件——这是判断滚动上下文是否“活起来”的唯一可靠方式。很多失效问题，根源不在样式写错，而在容器根本没被浏览器识别为可吸附滚动上下文。
