主区域滚动时如何固定三个带独立垂直滚动条的面板？

需求场景 #

• 三个可独立垂直滚动的面板（panes）
• 一个主内容区域（main section）

具体需求 #

当垂直滚动主内容区域时，三个面板需保持固定定位（position: fixed），且各自保留独立的垂直滚动条。

问题 #

直接为每个面板添加fixed定位会导致面板互相重叠，无法实现预期布局。

现有代码 #

<div className="grid h-screen grid-cols-[20vw_20vw_20vw_100vw] overflow-x-scroll">
  <div className="overflow-x-hidden overflow-y-scroll bg-yellow-400 text-50xl">PANE*1*Lorem ipsum</div>
  <div className="overflow-x-hidden overflow-y-scroll bg-green-500 text-50xl">PANE*2*Lorem ipsum</div>
  <div className="overflow-x-hidden overflow-y-scroll bg-blue-300 text-50xl">PANE*3*Lorem ipsum</div>
  <div className="text-50xl">
    <main>*MAIN*Lorem ipsum</main>
  </div>
</div>

场景示意图 #

解决方案 #

固定定位元素脱离文档流后，需要手动指定宽度和位置来避免重叠。基于Tailwind CSS可以这样修改：

修改后代码 #

<div className="h-screen overflow-y-auto">
  <!-- 固定面板 -->
  <div className="fixed top-0 left-0 w-[20vw] h-screen overflow-x-hidden overflow-y-scroll bg-yellow-400 text-50xl">PANE*1*Lorem ipsum</div>
  <div className="fixed top-0 left-[20vw] w-[20vw] h-screen overflow-x-hidden overflow-y-scroll bg-green-500 text-50xl">PANE*2*Lorem ipsum</div>
  <div className="fixed top-0 left-[40vw] w-[20vw] h-screen overflow-x-hidden overflow-y-scroll bg-blue-300 text-50xl">PANE*3*Lorem ipsum</div>
  
  <!-- 主内容区域，左侧留出面板总宽度的空间 -->
  <div className="ml-[60vw] text-50xl">
    <main>*MAIN*Lorem ipsum</main>
  </div>
</div>

关键修改说明 #

1. 脱离原有Grid布局：固定定位元素不再受Grid约束，直接移除原Grid容器的多列设置
2. 固定面板定位：
   • 每个面板设置fixed top-0 h-screen，确保固定在视口顶部并占满整个视口高度
   • 通过left属性依次定位：第一个面板left-0，第二个left-[20vw]，第三个left-[40vw]，刚好衔接无重叠
   • 保留w-[20vw]维持原宽度，overflow-y-scroll保证面板自身可独立垂直滚动
3. 主内容区域适配：
   • 主容器设置overflow-y-auto，让主内容可垂直滚动
   • 给主内容区域添加ml-[60vw]（3个面板总宽度20vw×3），避免内容被固定面板遮挡

这样就能实现主区域滚动时面板固定，且面板各自独立滚动、不重叠的效果。

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