配了三年表格，每次想让列头行头同时 sticky 都要套两个容器——今天这件事被 CSS 单轴滚动彻底原生化了

做数据表格，最烦 sticky 只能管一个方向。要列头固定，行头跟着内容滚；要行头固定，列头跟着内容滚；同时固定？套两层滚动容器，代码复杂度直接翻倍。

Chrome 153 用一个 overflow 新写法，把这件事彻底原生化了。

这个问题到底有多烦

在 single-axis scroll containers 出现之前，CSS 的 overflow 属性只认「要么全滚动、要么全固定」两种模式。你没法跟浏览器说「这个方向让它独立滚动、那个方向让它被父容器管」。

做个表格，左边第一列是行头，顶部第一行是列头。理想行为：

• 上下滚动，列头固定，行头跟着滚
• 左右滚动，行头固定，列头跟着滚

实际得套两层容器，外层管横向，里层管纵向，再给表头加 sticky。滚动条关系一塌糊涂，事件穿透修不完。

overflow: scroll clip 是什么

CSS Overflow Level 4 引入了 scroll 配合 clip 关键字：

.scrollable-table {
  overflow: scroll clip;
}

clip 的核心语义：把这个方向变成独立滚动容器，但不创建新的滚动上下文。这个容器在这个轴上只管裁剪，不管控制权。

配合 position: sticky：

/* 表格横向独立滚动，竖向交给父容器 */
.table-scroll-x {
  overflow-x: scroll clip;
  overflow-y: hidden;
}

/* 行头：竖向 sticky */
.row-header {
  position: sticky;
  left: 0;
  z-index: 1;
}

/* 左上单元格：两个轴同时 sticky */
.corner-cell {
  position: sticky;
  top: 0;
  left: 0;
  z-index: 2;
}

上下滚，行头 sticky；左右滚，列头 sticky。两轴互不干扰，零 JavaScript。

实战场景

财务仪表板：列多行多，横看科目纵看时间。表头漏掉一个，用户当场迷路。

甘特图：横向时间轴，纵向任务线。单轴滚动是最高效的实现方式，没有之一。

大表单/分类列表：横向字段，纵向记录。分类标签列固定，用户才不会在滚动后不知道自己在哪一类。

三步下一步

1. 查支持率：Chrome 153+ / Edge 153+，Firefox 和 Safari 暂不支持（~74% 全球）。用 @supports (overflow: scroll clip) 渐进增强，未支持时降级普通滚动。

2. 简化现有双容器方案：检查现有表格是否在用「外层横滚 + 内层纵滚」结构。能合并为一层就合并，减少一个 DOM 节点意味着更少的 reflow。

3. 统一滚动条样式：scroll clip 不创建新滚动上下文，滚动条样式需在外层统一设置。另外 scroll-behavior 作用范围也可能受影响，建议实测后做适配。

单轴滚动补完了 CSS 溢出模型的一块空白——让滚动方向成为可声明、可组合的属性。地图、画板，白板这类多方向独立控制的 UI，都会从这套模型里受益。