scroll-snap-type 必须设在滚动容器上且满足溢出条件才能生效，其对齐精度受限于平台滚动策略，需结合 js 二次校准以实现跨设备一致的卡片居中停靠。
scroll-snap-type 能做卡片滚动，但别指望它“绝对精准停在中间”——尤其在 macOS 触控板、iOS Safari 上，快速滑动后松手，卡片大概率卡在两个位置之间。
scroll-snap-type 必须设在滚动容器上，不是卡片元素上
常见错误是把 scroll-snap-type: x mandatory 写在每个卡片 <div class="card"> 上。它只对**滚动容器本身**生效，比如外层的 <code><div class="carousel">。这个容器还得满足两个硬条件：
<ul>
<li>设置了 <code>overflow-x: auto 或 overflow-x: scroll
否则 scroll snap 完全不触发，控制台也不会报错，纯静默失效。
scroll-snap-align 取值决定“哪一点”贴住视口边缘
scroll-snap-align: center 不是让卡片“居中显示”，而是让卡片的**几何中心点**对齐容器视口的中心线。如果卡片有 margin 或 padding，这些也会参与计算，导致视觉偏移。更稳的做法是：
- 卡片用
box-sizing: border-box - 清除所有默认
margin和padding（包括父容器） - 横向滚动时，统一用
scroll-snap-align: center，别混用start和end - 避免在
transform或position: sticky元素上叠加 scroll snap
移动端手指滑动卡顿或跳页不准，问题常出在事件干扰
iOS Safari 对 scroll-snap-type: x mandatory 的“强制”支持有限：用户快速拖拽后松手，系统会按惯性停在中间，而不是吸附到最近卡片。这不是 bug，是 WebKit 的滚动策略。要缓解：
- 加
scroll-behavior: smooth提升过渡观感 - 监听
scrollend事件（注意：旧版 Safari 不支持），手动调用element.scrollIntoView({ block: 'nearest', inline: 'center' })二次对齐 - 对齐完成后加防抖锁，比如 100ms 内忽略新
scroll事件，避免反复触发 - 真机测试必须做——模拟器滚动表现过度理想，毫无参考价值
隐藏滚动条但保留拖拽能力，CSS 就够用
不需要 JS 就能实现轻量横向滑动，关键三步：
- 容器设
display: flex+overflow-x: auto - 卡片设
flex: 0 0 auto（防止被压缩）+scroll-snap-align: center - 隐藏滚动条：
scrollbar-width: none（Firefox）+::-webkit-scrollbar { display: none }（Chrome/Safari）
注意：别只加 overflow-x: auto 就完事，漏掉 display: flex 或 white-space: nowrap，卡片会换行，根本滑不动。
真正难的不是写对那几行 CSS，而是理解 scroll snap 是“辅助对齐机制”，不是“精确定位 API”。当业务要求松手即停、毫秒级响应、跨设备一致时，得准备好用 JS 补位——而补位逻辑本身，又容易引发滚动抖动或事件冲突。
