如何缩放div内容而非容器本身并兼容position:sticky元素？

需求与问题 #

需要实现带粘性行列的布局：

• 列标题垂直粘性（水平滚动时固定在顶部，不随滚动移动）
• 行标题水平粘性（垂直滚动时固定在左侧，不随滚动移动）
  同时要求仅缩放内部内容，保持容器铺满窗口，滚动条正常显示在屏幕边缘。

直接给容器.container添加transform: scale(0.7)会导致容器尺寸缩小，无法铺满窗口。将内容放入.scale-container并缩放后，粘性元素出现异常：仅部分区域保持粘滞，滚动时无法正确固定。

基础布局代码 #

CSS #

.container {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: #f0f0f0;
  overflow: auto;
}

.sticky-row-header {
  left: 0;
  width: 200px;
  height: 20px;
  position: sticky;
  background-color: #ccc;
  margin-bottom: 5px;
}

.sticky-column-header {
  top: 0;
  height: 20px;
  margin-left: 200px;
  position: sticky;
  display: flex;
  gap: 5px;
}

.sticky-column-header-inner {
  flex: 0 0 200px;
  background-color: #ccc;
}

.item {
  position: absolute;
  width: 300px;
  height: 300px;
  top: 300px;
  left: 300px;
  background-color: #6ae;
}

HTML #

<div class="container">
  <div class="sticky-column-header">
    <div class="sticky-column-header-inner">Column1</div>
    <div class="sticky-column-header-inner">Column2</div>
    <div class="sticky-column-header-inner">Column3</div>
    <div class="sticky-column-header-inner">Column4</div>
    <div class="sticky-column-header-inner">Column5</div>
  </div>
  <div class="sticky-row-header">Row1</div>
  <div class="sticky-row-header">Row2</div>
  <div class="sticky-row-header">Row3</div>
  <div class="item">Item</div>
</div>

尝试后的异常代码 #

CSS #

.container {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: #f0f0f0;
  overflow: auto;
}

.scale-container {
  transform-origin: 0 0;
  transform: scale(0.7);
}

.sticky-row-header {
  left: 0;
  width: 200px;
  height: 20px;
  position: sticky;
  background-color: #ccc;
  margin-bottom: 5px;
}

.sticky-column-header {
  top: 0;
  height: 20px;
  margin-left: 200px;
  position: sticky;
  display: flex;
  gap: 5px;
}

.sticky-column-header-inner {
  flex: 0 0 200px;
  background-color: #ccc;
}

.item {
  position: absolute;
  width: 300px;
  height: 300px;
  top: 800px;
  left: 2000px;
  background-color: #6ae;
}

HTML #

<div class="container">
  <div class="scale-container">
    <div class="sticky-column-header">
      <div class="sticky-column-header-inner">Column1</div>
      <div class="sticky-column-header-inner">Column2</div>
      <div class="sticky-column-header-inner">Column3</div>
      <div class="sticky-column-header-inner">Column4</div>
      <div class="sticky-column-header-inner">Column5</div>
    </div>
    <div class="sticky-row-header">Row1</div>
    <div class="sticky-row-header">Row2</div>
    <div class="sticky-row-header">Row3</div>
    <div class="item">Item</div>
  </div>
</div>

原因分析 #

这不是Chrome的bug，是CSS position: sticky的工作机制导致的：
粘性元素的粘滞定位参考的是最近的可滚动祖先元素，但当元素的父容器设置了transform属性时，该父容器会创建一个新的包含块，粘性元素的粘滞目标会变成这个带transform的父容器，而非外层的.container。由于.scale-container本身没有滚动条，粘性元素无法正确触发粘滞行为，导致异常。

解决方案 #

方案1：使用zoom属性（Chrome推荐） #

zoom属性仅做视觉缩放，不会创建新的包含块，粘性元素的参考依然是外层的.container，行为正常：

.scale-container {
  zoom: 0.7; /* 直接缩放内容，不改变布局结构 */
}

方案2：缩放容器并调整尺寸 #

给.container直接添加缩放，同时计算并设置容器的宽高，让其视觉尺寸铺满窗口：

.container {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: #f0f0f0;
  overflow: auto;
  transform-origin: 0 0;
  transform: scale(0.7);
  /* 计算缩放后的宽高，让容器视觉上占满窗口 */
  width: calc(100% / 0.7);
  height: calc(100% / 0.7);
}

此方案无需额外嵌套容器，粘性元素的参考依然是.container，滚动条和粘滞行为均正常。

内容的提问来源于stack exchange，提问作者Kasheftin