做表格页面最怕什么？表头 sticky 失效——Chrome 156 今天把这件事用一对 CSS 关键字彻底修掉了

做表格页面最怕什么？表头 sticky 失效。Chrome 156 今天把这件事用一对 CSS 关键字彻底修掉了。

写过前端的都知道这个场景：表格外层套了一个横向滚动的 wrapper，表头要 sticky 贴顶。结果怎么都不动——因为 overflow-x: auto 会把 overflow-y 也悄悄变成 auto，把这个 wrapper 变成了二维滚动容器，position: sticky 找滚动祖先时在这里就停了，根本贴不到页面根滚动容器上去。

这个问题有多普遍？早在 2017 年 1 月，W3C CSS WG 就收到了第一个 issue（#865），主题是「在 overflow: hidden/auto 父容器里支持 position: sticky」。一拖就是将近十年。十年的 workaround 是什么？写 JS，用 ScrollObserver 监听滚动，手动计算 sticky 位置，在不支持的环境里还得写 fallback。

Chrome 156 今天（2026 年 10 月 7 日）稳定发布，把这件事修掉了。

单轴滚动容器是 CSS Overflow Level 5 规范的一部分，核心改动：允许 overflow 的四个值（auto / scroll / hidden）和 clip 组合，形成「只在这个轴可滚动，另一轴只裁切」的行为。

旧写法：

.table-wrapper {
  overflow-x: auto; /* 浏览器悄悄把 overflow-y 也变成 auto */
}

新写法：

.table-wrapper {
  overflow: auto clip; /* 明确告知浏览器只在 inline 轴建滚动容器 */
}
/* 表头现在能正确追踪页面根滚动容器了 */
thead { position: sticky; top: 0; }

也可以分开写：

.table-wrapper {
  overflow-x: auto;
  overflow-y: clip; /* 显式 clip，阻止第二轴建立滚动容器 */
}

副作用：190 个网站测过，发现三个变化

官方团队在稳定发布前测试了 190 个网站，这个改动会连带影响三个 scroll 相关 API：

第一，overscroll-behavior 在 clip 轴不再触发。pull-to-refresh 或 overscroll-behavior-y: contain 在单轴容器上会静默失效——因为被 clip 的轴不再是滚动容器，overscroll-behavior 不会触发。Chrome 156 已和 Firefox/Safari 行为对齐。

第二，scrollTo() 在 clip 轴被强制限制。原来 overflow: hidden 的容器里可以调用 wrapper.scrollTo({ top: 100 }) 强制滚动，但 overflow: auto clip 下对 clip 轴调用 scrollTo() 会直接被浏览器拒绝，抛出异常或静默忽略。

第三，Flex/Grid 最小尺寸计算会变。在 flex/grid 布局里，min-width: auto（默认最小尺寸）通常会让子元素填满可用空间，但加了 overflow: clip 之后，这个默认值反而开始生效，flex/grid 容器可能意外变大。

feature detection：不能用 @supports (overflow: auto clip)

规范里新增了 @supports named-feature() 语法，专门检测这种行为级特性：

@supports named-feature(single-axis-scroll-container) {
  .table-wrapper { overflow: auto clip; }
  thead { position: sticky; top: 0; } /* 纯 CSS，不需要 JS */
}

注意：@supports (overflow: auto clip) 只验证语法是否可解析，不能验证浏览器是否真正实现了单轴滚动行为，会产生误判。

怎么判断你的页面有没有这个问题

打开 DevTools，在 .table-wrapper 上打条件断点，看 getComputedStyle(el).overflow 的值。如果看到 overflow-x: auto 变成 overflow: auto auto，说明这个滚动容器是二维的，你的 sticky 定位已经受影响。

落地步骤

第一步，先搜你的代码库里有没有 overflow-x: auto 或 overflow-y: auto 的 wrapper 包装横向滚动内容（常见于表格、卡片列表、代码块）；第二步，加上 feature detection 保护层；第三步，把 overflow-x: auto 替换成 overflow: auto clip（或 overflow-x: auto; overflow-y: clip）；第四步，验证页面里有没有用 overscroll-behavior 和 scrollTo()，有的话需要单独处理边界情况；第五步，在 Chrome 156 下测试 sticky 表头是否正确贴住页面顶部。

Chrome 156 今天稳定发布。Firefox 和 Safari 还在跟进（Bugzilla 各有 open ticket），feature detection 记得做渐进增强。

修了一个十年的 CSS quirk，没多写一行 JS。