CSS scroll-snap 怎样让横向列表停在卡片边缘

横向卡片列表如果只设置 overflow-x: auto，用户松手后通常会停在任意位置，卡片左边可能被截断。要让它停在卡片边缘，做法是把吸附规则拆成两部分：滚动容器使用 scroll-snap-type: x mandatory 或 proximity，卡片使用 scroll-snap-align: start。前者决定“沿哪个轴、以多强的力度吸附”，后者决定“卡片哪一条边对齐”。

本文使用的是浏览器原生 CSS Scroll Snap 能力，官方资料入口如下：

官方资料：https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Scroll_snap

如果目标是“每次停在卡片左边缘”，先把 scroll-snap-type 放在横向滚动容器，再把 scroll-snap-align: start 放在卡片上；首尾留白统一用 scroll-padding-inline 调整。

先把滚动容器和卡片分工

CSS Scroll Snap 不会凭空创建滚动位置，它只会在已有溢出滚动的元素上约束滚动结束位置。容器负责三件事：允许横向滚动、声明吸附轴、选择吸附严格程度；卡片负责声明自己在吸附区里的对齐方式。

scroll-snap-type 写在滚动容器上，x 表示横向，mandatory 表示滚动结束时优先落到吸附点，proximity 则给浏览器更大的自由度。scroll-snap-align 写在子项上，start、center 和 end 分别表示用卡片的起点、中点或终点对齐吸附区。

用 start 吸附到卡片边缘

下面是一套最小写法。卡片用 flex: 0 0 82% 保留下一张卡片的可见提示，容器的 gap 只负责卡片之间的间距；真正决定“松手后停在哪”的是两条 scroll-snap 声明。

  
订单概览
库存提醒
配送进度

.card-strip {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  /* 让吸附点沿横轴生效，并在滚动结束时停到某个卡片。 */
  scroll-snap-type: x mandatory;
  /* 让滚动条和卡片在触摸设备上更容易使用。 */
  overscroll-behavior-inline: contain;
  scrollbar-width: thin;
}

.card {
  flex: 0 0 82%;
  min-width: 0;
  /* 卡片的起点对齐滚动容器的吸附区起点。 */
  scroll-snap-align: start;
  border: 1px solid #d9e2f0;
  border-radius: 16px;
  padding: 24px;
  background: #ffffff;
}

这里的关键不是卡片必须占 82%，而是卡片必须有明确宽度并且能够溢出容器。对于桌面端更宽的布局，可以把卡片宽度改成固定值或使用 clamp()；只要横向滚动容器和子项的职责不变，吸附逻辑仍然成立。

用 scroll-padding 处理首尾留白

没有留白时，第一张卡片可能紧贴容器边缘，最后一张卡片也可能只能停在很靠右的位置。把 scroll-padding-inline 加到容器上，可以调整滚动端的“最佳可视区域”，让首卡和末卡按照同一条内缩边缘停靠。它不是给卡片增加外边距，而是在滚动容器里定义吸附参考区。

.card-strip {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  /* 首尾各留出 20px，吸附位置不会贴住容器边框。 */
  scroll-padding-inline: 20px;
  padding-inline: 20px;
}

.card {
  flex: 0 0 min(82%, 360px);
  /* 仍然用卡片起点对齐容器的可视吸附区。 */
  scroll-snap-align: start;
}

padding-inline 和 scroll-padding-inline 经常需要一起考虑：前者影响内容本身的布局空间，后者影响滚动吸附参考位置。只设置其中一个，视觉结果可能仍然符合某个屏幕尺寸，但在首尾或响应式宽度变化时出现不一致。

用 scroll-margin 修正单张卡片

如果只有某张卡片需要额外偏移，例如它前面有一个局部标记，或者滚动到该项时需要给固定控件留出空间，可以在卡片上使用 scroll-margin-inline-start。这和全局的 scroll-padding-inline 不同：前者只影响指定卡片的滚入位置，后者影响整个容器的可视吸附区域。

.card-strip {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 20px;
}

.card {
  scroll-snap-align: start;
}

.card--featured {
  /* 只有重点卡片向内预留额外的吸附距离。 */
  scroll-margin-inline-start: 12px;
}

大多数普通列表只需要 scroll-padding，不要给所有卡片都叠加 scroll-margin，否则间距来源不清晰，调试时很难判断到底是哪一个偏移生效。

mandatory 与 proximity 怎么选

mandatory 适合分页感明显的卡片浏览，例如一次只希望用户看到一个主卡片；它会把滚动结束位置强行拉到吸附点。proximity 更适合信息密度较高、用户希望自由停留的横向工具栏，浏览器会在接近吸附点时再帮助对齐。

两种模式都不能替代正确的卡片尺寸。卡片比滚动容器还高或太宽时，mandatory 可能让用户难以查看卡片中间内容；此时应先保证卡片可以完整阅读，再决定吸附强度。

/* 强分页：松手后尽量停在某张卡片的起点。 */
.card-strip--paged {
  scroll-snap-type: x mandatory;
}

/* 弱提示：接近卡片边缘时辅助对齐，但保留更自由的滚动。 */
.card-strip--free {
  scroll-snap-type: x proximity;
}

如果需要按钮把某张卡片带到起点，可以使用 scrollIntoView()，但它是主动滚动动作，不是吸附规则本身。设置 inline: "start" 能让主动滚动和卡片的 scroll-snap-align: start 保持同一方向。

function focusCard(card) {
  // 主动滚动只负责把目标卡片带到横向起点。
  card.scrollIntoView({
    behavior: "smooth",
    block: "nearest",
    inline: "start"
  });
}

浏览器兼容和降级边界

MDN 将 scroll-snap-type 和 scroll-snap-align 标记为广泛可用的能力，但具体项目仍应按自己的支持矩阵检查浏览器版本。CSS 不生效时，最安全的降级不是锁死横向滚动，而是保留 overflow-x: auto，让用户仍能拖动列表，只是不会自动停在边缘。

.card-strip {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  /* 不支持 Scroll Snap 的浏览器仍然可以正常横向滚动。 */
  scroll-snap-type: x proximity;
}

@supports not (scroll-snap-type: x mandatory) {
  .card-strip {
    /* 降级时只保留滚动能力，不阻止内容访问。 */
    scroll-snap-type: none;
  }
}

一张表记住四个属性的职责

因此，标题中的“停在卡片边缘”最小答案就是 scroll-snap-type: x mandatory 加 scroll-snap-align: start。当首尾需要统一内缩时增加容器的 scroll-padding-inline；只有单个卡片需要特殊偏移时再增加它自己的 scroll-margin-inline-start。

相关问题

为什么设置了 scroll-snap-type 却没有吸附？

先确认容器真的有横向溢出，卡片没有被压缩到一行可以完整容纳；再确认 scroll-snap-align 写在卡片而不是容器上。

卡片应该停在中间怎么办？

把卡片上的 scroll-snap-align: start 改成 center，同时重新检查卡片宽度和左右留白是否适合居中展示。

固定导航遮住卡片怎么办？

如果所有卡片都需要避开同一块固定 UI，优先在滚动容器上设置对应方向的 scroll-padding；只有个别卡片例外时再使用 scroll-margin。