移动端卡片滑动吸附失效主因是容器未满足三条件：overflow-x: auto、scroll-snap-type设于该容器、子项设scroll-snap-align:start；须避免错置属性、用margin分隔、多层嵌套及尺寸不稳。
直接结论：移动端卡片滑动吸附失效，90% 是因为容器没“活”起来——它既不可滚动，又没声明正确的 scroll-snap-type 位置，或子项没设 scroll-snap-align。纯 CSS 能跑通，但必须卡死三个硬性条件。
scroll-snap-type 必须写在 overflow-x: auto 的容器上，不是 .card 或 wrapper
常见错误是把 scroll-snap-type: x mandatory 加在卡片元素（如 .card）或最外层布局容器（如 .carousel-wrapper）上。它只对**实际发生横向滚动的容器**生效，也就是那个设置了 overflow-x: auto 的元素（比如 .carousel）。
DevTools 中能看到声明，但 computed styles 里 scroll-snap-type 值为空？基本就是写错位置了。
- ✅ 正确：给
.carousel设overflow-x: auto和scroll-snap-type: x mandatory - ❌ 错误：给
.carousel-wrapper（display: flex 的父容器）或.card（子项）加scroll-snap-type - ⚠️ 注意：
overflow-x: scroll在部分安卓 WebView 下不稳定；visible或hidden会彻底禁用吸附
每个卡片必须显式设 scroll-snap-align:start，且尺寸稳定
scroll-snap-align 是吸附的“开关”，不是可选项。不设它，mandatory 也形同虚设。iOS Safari 对 center 的实现存在偏移问题，尤其横竖屏切换后，吸附位置会漂移；start 是最稳的选择。
- ✅ 推荐：卡片用
flex: 0 0 100%+flex-shrink: 0，比width: 100vw更抗滚动条占位和缩放干扰 - ❌ 禁止用
margin分隔卡片——会导致可滚动距离 ≠ 视口单位，松手后卡在两页之间 - ⚠️
scroll-snap-align只对滚动容器的**直接子元素**生效；中间多套一层div就失效（除非你用display: contents或重构 DOM）
容器必须同时满足三个硬性条件才能触发吸附
缺一不可，否则 scroll-snap 完全静默——不报错、不警告、什么也不做：
-
overflow-x: auto（不能是hidden、visible或scroll） - 固定宽度：推荐
width: 100%或width: 100dvh（100dvh比100vh更稳，避开 iOS 地址栏遮挡） - 内容总宽 > 容器宽度：例如 3 张卡片各占
100%，总宽至少300%，否则无滚动空间
真机测试时若 Timeline 不触发 ScrollStart/ScrollEnd，说明容器根本没“活”起来。
快速滑动跳过中间项？加 scroll-snap-stop: always
用户猛甩屏幕时，滚动惯性可能让容器直接越过多个 scroll-snap-align 锚点，只停在首尾。这不是 bug，而是浏览器默认允许“跳停”。
- ✅ 给每张卡片加
scroll-snap-stop: always，强制每次滚动只停一个 snap point - ⚠️ 注意：该属性目前仅被 Chrome、Safari 支持，Firefox 尚未实现；若需全平台兼容，得靠 JS 监听
scrollend+scrollBy控制步进
最容易被忽略的是：容器是否真正可滚动。哪怕样式全对，只要 overflow-x: auto 没生效（比如父级 display: flex 未设 flex-direction，或子项总宽 ≤ 容器宽），scroll-snap 就彻底静默——它不会告诉你哪里错了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
