已准备好进行开发者测试：单轴滚动容器

Bramus
Free Debreuil
Free Debreuil
LinkedIn

发布时间：2026 年 9 月 4 日

“单轴滚动容器”功能扩展了 CSS overflow 属性，以支持可滚动值（auto、scroll、hidden）与 clip 结合使用（例如，overflow: scroll clip），从而仅针对一个轴生成滚动容器。

虽然此更改解锁了备受期待的功能（例如按轴固定的定位），但它也会在其他依赖于滚动的功能中引入额外的副作用。考虑到这些潜在的兼容性风险，我们要求开发者在将此功能发布到稳定版渠道之前测试其网站并提供反馈。

此功能可在 Beta 版、开发者版和 Canary 版 发布渠道的 Chrome 153 中进行开发者测试。您无需开启任何标志。

在单个轴上设置溢出的怪异行为

如果没有此功能，就无法使用 CSS 创建真正的单轴滚动容器。如果您将一个轴配置为滚动，同时尝试保持另一个轴可见（例如，设置 overflow-x: scroll 并保留 overflow-y: visible），则浏览器的样式引擎会自动强制可见轴计算为 auto（或 scroll）。这样会创建一个二维滚动条，即使您并不打算这样做。

当您尝试创建具有固定顶部行和固定第一列的表格时，这种怪异行为会变得非常明显。在以下示例中，目标是让第一列固定到水平滚动的 .table-wrapper，并让顶部行固定到文档的滚动条。

<div class="table-wrapper" style="overflow-x: auto;">
  <table>
    …
  </table>
</div>

/* Scroll horizontally */
.table-wrapper {
  overflow-x: auto;
}

/* Sticky top row */
.table-wrapper thead {
  position: sticky;
  top: 0;
}

/* Sticky first column */
.table-wrapper td:first-child {
  position: sticky;
  left: 0;
}

如果您尝试一下，就会发现它不起作用。这是因为前面描述的溢出怪异行为：.table-wrapper 实际上变成了一个二维滚动条。因此，当 position: sticky 查找每个轴的最近祖先滚动条时，结果都是 .table-wrapper 元素。

实时演示

演示录制

单轴滚动容器修复了怪异行为

借助单轴滚动容器，您可以使用 clip 显式阻止辅助轴成为滚动条。这样，position: sticky 就可以独立跟踪两个不同的滚动容器。

如需修复表格示例，请将水平滚动与 overflow-y: clip 配对。

.table-wrapper {
  overflow-x: auto;
  overflow-y: clip;
}

或者，使用 overflow 简写：

.table-wrapper {
  overflow: auto clip;
}

这样做后，.table-wrapper 仅充当 x 轴的滚动容器。固定顶部行现在将绕过它，并正确固定到文档在 y 轴上的滚动条，而第一列将继续水平固定到 .table-wrapper。

如果您在支持此功能的浏览器中查看这篇文章，可以在以下演示中看到它的实际效果：

实时演示

演示录制

受影响的行为

由于单轴滚动容器会更改滚动上下文的评估和创建方式，因此您可能会注意到其他依赖于滚动容器的功能（例如以下功能）发生了变化：

  • position: sticky：如所示，元素现在将正确固定在单轴滚动容器中，从而改进了受一个轴上的 overflow: clip 约束的元素的行为。
  • overscroll-behavior：由于元素现在只能在一个轴上成为滚动容器，因此 overscroll-behavior 可能不再在剪辑轴上触发，这可能会影响自定义下拉刷新或回弹效果。此行为更改与 Firefox 和 Safari 一致。
  • 以编程方式滚动：现在，在单轴滚动容器上调用滚动 API（例如 Element.scrollTo()）会强制执行以编程方式滚动约束。元素将拒绝沿定义为剪辑的轴以编程方式滚动。
  • 网格和弹性布局的最小单元格大小：对于网格和弹性布局中的滚动容器，系统通常会忽略默认的最小大小 (min-width: auto)，以允许单元格根据可用空间自行调整。如果在同一轴上设置了 overflow: clip，则默认的最小大小将开始生效，这可能会导致弹性或网格容器变大。

功能检测

如需检测对单轴滚动容器的支持情况，请使用 single-axis-scroll-container 关键字查询 the @supports named-feature() rule。

@supports named-feature(single-axis-scroll-container) {
  /* Feature is supported */
}

如 CSSWG 问题 #13677 中所述，使用 named-feature(single-axis-scroll-container) 是检测此功能的推荐标准方法，因为仅使用 @supports (overflow: scroll clip) 进行检查仅为解析检查，无法检测浏览器是否正确处理了修订后的单轴滚动行为。

在 JavaScript 中，使用 CSS.supports("named-feature(single-axis-scroll-container)") 执行此检查。

欢迎提供反馈

为了评估潜在的兼容性风险，我们已在 190 个网站上 进行了测试。根据此分析，这些更改似乎不会引入任何重大中断。

不过，由于单轴滚动容器从根本上改变了滚动上下文的评估方式，因此我们正在扩大测试范围。我们要求您在非稳定版 Chrome 渠道 上测试网站和 Web 应用，以帮助在将此功能发布到稳定版之前发现任何极端情况。

如果您的网站开始出现问题，或者您遇到意外的滚动行为，请提交 Chromium bug。