CSS scroll snap让横向卡片滚动停在卡片边界的实现方法

横向卡片列表出现“松手后停在两张卡片之间”，通常不是滚动距离算错，而是容器没有声明吸附轴，卡片也没有提供可停靠的位置。CSS Scroll Snap 的最小方案是：滚动父元素写 scroll-snap-type: x mandatory，卡片写 scroll-snap-align: start，再用固定宽度或 flex-basis 保证每个卡片有稳定边界。

先把横向滚动容器和卡片宽度定下来

先确认真正滚动的是哪一个元素。它需要有横向溢出，例如 overflow-x: auto，子项不能因为 flex-shrink: 1 被压缩到全部同时可见。移动端常用“一个完整卡片加一点下一张预告”的布局，因此可以让卡片占视口的 82% 到 88%，但宽度应保持稳定。

.card-scroller {
  display: flex;
  gap: 16px; /* 用统一间距建立可预测的卡片边界 */
  overflow-x: auto; /* 只有这个元素负责横向滚动 */
  padding: 0 20px 12px; /* 给首尾卡片留下基础留白 */
}

.card {
  flex: 0 0 84%; /* 防止卡片被压缩，保留下一张卡片的提示 */
  min-width: 0; /* 让长标题在卡片内部正常换行 */
}

不要把 overflow-x: auto 只写在外层布局壳上，再让内层继续溢出；这样用户拖动的元素和设置 snap 的元素不一致，最容易出现“属性写了却不吸附”。

用 scroll-snap-type 与 scroll-snap-align 对齐卡片

容器的 scroll-snap-type 负责声明横向吸附：x 表示只处理横轴，mandatory 表示滚动结束时应落到某个有效吸附点。卡片的 scroll-snap-align: start 则把卡片起始边对齐到滚动容器的可视起始边，于是每次停下都能看到完整卡片。

.card-scroller {
  scroll-snap-type: x mandatory; /* 横向滚动结束时吸附到有效位置 */
  scroll-behavior: smooth; /* 脚本或键盘移动时提供连续过渡 */
}

.card {
  scroll-snap-align: start; /* 将每张卡片的起始边对齐到视口起始边 */
}

/* 如果产品希望卡片居中展示，可改成 scroll-snap-align: center */

mandatory 适合分页感强的卡片带；如果内容宽度不规则、用户需要在中间自由停留，可以改用 proximity，让浏览器在接近吸附点时再对齐。两者都不是“滚动一段固定像素”的替代品，实际停靠点仍由子项的 snap 对齐位置决定。

用 gap、scroll-padding 和 scroll-margin 修正停靠间距

三个参数解决的是不同问题：gap 是卡片之间的布局距离；scroll-padding 是容器的可视安全区，适合避让吸顶栏；scroll-margin 是某个卡片自己的停靠外边距，适合给首尾或重点卡片做局部修正。不要用增大 gap 去代替固定栏避让，否则中间卡片之间会被拉得过松。

.card-scroller {
  gap: 16px; /* 控制卡片之间的视觉间隔 */
  scroll-padding-inline: 20px; /* 吸附时避开容器两侧的安全区 */
}

.card:first-child {
  scroll-margin-inline-start: 20px; /* 修正第一张卡片的停靠起点 */
}

.card:last-child {
  scroll-margin-inline-end: 20px; /* 修正最后一张卡片的停靠终点 */
}

如果页面有固定头部但横向卡片只在横轴滚动，优先使用逻辑属性 scroll-padding-inline；如果还存在纵向吸附，则按实际书写模式补充 block 方向。检查时重点看“卡片边界是否落在安全区内”，而不是只看有没有出现平滑动画。

处理快速滑动、键盘访问与降级边界

普通卡片列表允许用户快速甩动，浏览器可能跨过多个吸附点；若每张卡片都是必须逐个阅读的内容，可在卡片上增加 scroll-snap-stop: always，但它会让快速滑动更受约束，不宜默认用于长列表。键盘用户仍应能通过 Tab 聚焦卡片内的链接或按钮；不要用 JavaScript 监听 scroll 强行改写 scrollLeft，否则容易和原生吸附抢控制权。

Scroll Snap 不负责补齐卡片语义、焦点样式或按钮操作。对不支持该特性的环境，基础的 overflow-x: auto 仍应保留，让用户至少可以自由滚动。若卡片内容高度变化，先保证布局在没有 snap 时也可读，再把吸附作为体验增强。

用最小检查表确认卡片停在边界

实际调试可以先临时把卡片边框和容器背景标出来，再逐项关闭 scroll-padding、scroll-margin，判断错位来自布局还是安全区。确认容器、卡片和间距三个层级都符合预期后，再决定是否启用 mandatory 或 scroll-snap-stop。

常见问题

为什么写了 scroll-snap-type 还是停不到卡片边界？

先检查它是否写在真正产生横向滚动的容器上，再检查卡片是否有 scroll-snap-align，以及卡片是否被 flex 收缩。三者缺一都可能看起来像 snap 失效。

横向卡片应该用 mandatory 还是 proximity？

分页阅读、每次只展示一个完整卡片时用 mandatory；内容宽度变化大、需要自由停留时用 proximity，让吸附更温和。

gap 和 scroll-padding 可以同时使用吗？

可以。gap 负责卡片之间的距离，scroll-padding 负责滚动容器的可视安全区，职责不同，组合使用更容易保持首尾和中间卡片一致。

必须用 JavaScript 计算下一张卡片吗？

单纯让滚动停在卡片边界不需要。只有在自定义分页器、无限循环、特殊手势或需要读取当前 snap 目标时，才考虑增加脚本。