实现共享父级滚动条的双区域粘性表头效果的技术问题

DevOps 小满

2026-4-7

我先说明下，我放那张图只是为了展示后续想实现的效果，所以我觉得用单个共享表格是做不到的。这也是为什么最后我把代码拆成了两个独立的父容器。

如果用单个表格的话，实现粘性表头很简单，只要限制表格的尺寸就行：

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<div class="max-h-screen h-fit w-1/4 overflow-x-auto">
  <div class="sticky top-0 h-10 w-[2000px] bg-green-500 text-white z-10">Sticky Table Header</div>
  <div>
    <div class="sticky top-10 w-[2000px] bg-green-300">Sticky Group Header #1</div>
    <div class="h-40 w-[2000px] bg-gray-100">Row</div>
    <div class="h-40 w-[2000px] bg-gray-100">Row</div>
    <div class="h-40 w-[2000px] bg-gray-100">Row</div>
    <div class="h-40 w-[2000px] bg-gray-100">Row</div>
    <div class="h-40 w-[2000px] bg-gray-100">Row</div>
    <div class="h-40 w-[2000px] bg-gray-100">Row</div>
  </div>
  <div>
    <div class="sticky top-10 w-[2000px] bg-green-300">Sticky Group Header #2</div>
    <div class="h-40 w-[2000px] bg-gray-100">Row</div>
    <div class="h-40 w-[2000px] bg-gray-100">Row</div>
    <div class="h-40 w-[2000px] bg-gray-100">Row</div>
    <div class="h-40 w-[2000px] bg-gray-100">Row</div>
    <div class="h-40 w-[2000px] bg-gray-100">Row</div>
    <div class="h-40 w-[2000px] bg-gray-100">Row</div>
  </div>
</div>

但如果把两个表格放在同一个父容器里，我不能把每个表格的尺寸设得太小——不然每个表格都会有自己的滚动条，而我想要的是整个内容在Y轴上一起滚动：

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<div class="flex h-screen w-screen overflow-y-auto divide-x-2">
  <!-- without max-h-screen -->
  <div class="h-fit w-1/4 overflow-x-auto">
    <div class="sticky top-0 h-10 w-[2000px] bg-green-500 text-white z-10">Sticky Table Header</div>
    <div>
      <div class="sticky top-10 w-[2000px] bg-green-300">Sticky Group Header #1</div>
      <div class="h-40 w-[2000px] bg-gray-100">Row</div>
      <div class="h-40 w-[2000px] bg-gray-100">Row</div>
      <div class="h-40 w-[2000px] bg-gray-100">Row</div>
      <div class="h-40 w-[2000px] bg-gray-100">Row</div>
      <div class="h-40 w-[2000px] bg-gray-100">Row</div>
      <div class="h-40 w-[2000px] bg-gray-100">Row</div>
    </div>
    <div>
      <div class="sticky top-10 w-[2000px] bg-green-300">Sticky Group Header #2</div>
      <div class="h-40 w-[2000px] bg-gray-100">Row</div>
      <div class="h-40 w-[2000px] bg-gray-100">Row</div>
      <div class="h-40 w-[2000px] bg-gray-100">Row</div>
      <div class="h-40 w-[2000px] bg-gray-100">Row</div>
      <div class="h-40 w-[2000px] bg-gray-100">Row</div>
      <div class="h-40 w-[2000px] bg-gray-100">Row</div>
    </div>
  </div>
  <!-- without max-h-screen -->
  <div class="h-fit w-3/4 overflow-x-auto">
    <div class="h-10 sticky top-0 w-[2000px] bg-amber-500 text-white z-10">Sticky Gantt Header</div>
    <div>
      <div class="sticky top-10 w-[2000px] bg-amber-300">Sticky Group Header #1</div>
      <div class="h-40 w-[2000px] bg-gray-100">Row</div>
      <div class="h-40 w-[2000px] bg-gray-100">Row</div>
      <div class="h-40 w-[2000px] bg-gray-100">Row</div>
      <div class="h-40 w-[2000px] bg-gray-100">Row</div>
      <div class="h-40 w-[2000px] bg-gray-100">Row</div>
      <div class="h-40 w-[2000px] bg-gray-100">Row</div>
    </div>
    <div>
      <div class="sticky top-10 w-[2000px] bg-amber-300">Sticky Group Header #2</div>
      <div class="h-40 w-[2000px] bg-gray-100">Row</div>
      <div class="h-40 w-[2000px] bg-gray-100">Row</div>
      <div class="h-40 w-[2000px] bg-gray-100">Row</div>
      <div class="h-40 w-[2000px] bg-gray-100">Row</div>
      <div class="h-40 w-[2000px] bg-gray-100">Row</div>
      <div class="h-40 w-[2000px] bg-gray-100">Row</div>
    </div>
  </div>
</div>

但这种情况下，粘性定位就达不到预期效果了，因为表格的高度没有被限制，所以表格本身其实没有发生滚动。要是我把表格的高度设为最大化，粘性定位倒是能正常工作，因为此时滚动的是粘性元素的父容器，但这样又没法让两个元素作为一个整体同步滚动了：

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<div class="flex h-screen w-screen overflow-y-auto divide-x-2">
  <!-- with max-h-screen -->
  <div class="max-h-screen h-fit w-1/4 overflow-x-auto">
    <div class="sticky top-0 h-10 w-[2000px] bg-green-500 text-white z-10">Sticky Table Header</div>
    <!-- 原内容此处有截断，保留现有部分 -->
  </div>
</div>

内容来源于stack exchange