发布时间：2026 年 9 月 4 日
“单轴滚动容器”功能扩展了 CSS overflow 属性，以支持可滚动值（auto、scroll、hidden）与 clip 结合使用（例如 overflow: scroll clip），从而实现仅在一个轴上滚动的滚动容器。
虽然此变更可实现用户高度要求的功能（例如按轴粘性定位），但也会对其他依赖于滚动的功能产生额外的副作用。鉴于存在这些潜在的兼容性风险，我们要求开发者在稳定版渠道推出此功能之前测试其网站并提供反馈。
此功能已在 Beta 版、开发者版和 Canary 版发布渠道的 Chrome 154 中提供，供开发者测试。您无需开启任何标志。
设置单轴溢出的怪异之处
如果没有此功能，就无法使用 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()）会强制执行以编程方式滚动约束。相应元素将拒绝沿定义为剪辑的轴以程序化方式滚动。 - 网格和 Flex 布局的最小单元格尺寸：对于网格和 Flex 布局中的滚动容器，系统通常会忽略默认的最小尺寸 (
min-width: auto)，以允许单元格根据可用空间自行调整。当overflow: clip设置在同一轴上时，默认的最小尺寸将开始生效，可能会导致 flex 或网格容器变大。
功能检测
如需检测对单轴滚动容器的支持，请使用 single-axis-scroll-container 关键字查询 @supports named-feature() 规则。
@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 错误。