求助：实现三固定侧边栏+主内容区滑出布局的技术问题

需求说明 #

• 实现三个从屏幕左侧起始的pane，每个宽度为屏幕宽度的20%
• 一个始终占屏幕宽度100%的main section
• 当开启任意1个、2个或全部3个pane时，main section需滑出画布（off-canvas）（向右推移）

尝试代码及遇到的问题 #

<body className="flex h-screen overflow-x-scroll">
    <div className="overflow-x-hidden overflow-y-scroll w-[20%]">Pane-one</div>
    <div className="overflow-x-hidden overflow-y-scroll w-[20%]">Pane-two</div>
    <div className="overflow-x-hidden overflow-y-scroll w-[20%]">Pane-three</div>
    <div className="w-full">
        <main>Main content -Main content -Main content -Main content</main>
    </div>
</body>

• 给每个pane添加fixed属性后，所有pane会重叠，但此时main section的表现符合预期；需要三个pane在main section滚动时保持position:fixed
• 当前body带有水平滚动条，但main section会收缩以适配屏幕宽度，需要它始终保持100%屏幕宽度并实现滑出画布效果

解决方案 #

核心是通过固定容器包裹pane避免重叠，同时独立控制main区域的偏移和宽度，消除全局水平滚动。

基础实现代码（Tailwind CSS）

<body className="h-screen overflow-hidden">
  <!-- 固定定位的pane容器，横向排列避免重叠 -->
  <div className="fixed top-0 left-0 h-screen flex">
    <div className="pane w-[20%] overflow-y-scroll bg-gray-100 p-4">Pane-one</div>
    <div className="pane w-[20%] overflow-y-scroll bg-gray-200 p-4">Pane-two</div>
    <div className="pane w-[20%] overflow-y-scroll bg-gray-300 p-4">Pane-three</div>
  </div>

  <!-- Main区域容器，通过margin-left控制偏移 -->
  <div className="main-container h-screen overflow-y-scroll" style={{ marginLeft: '60%' }}>
    <main className="w-screen min-h-full bg-white p-4">
      Main content -Main content -Main content -Main content
    </main>
  </div>
</body>

动态切换Pane的逻辑

如果需要支持手动开启/关闭pane，可通过JS计算可见pane的总宽度，动态更新main区域的偏移：

// 更新main区域偏移量
const updateMainOffset = () => {
  const visiblePanes = document.querySelectorAll('.pane:not(.hidden)');
  let totalWidth = 0;
  visiblePanes.forEach(pane => totalWidth += pane.offsetWidth);
  document.querySelector('.main-container').style.marginLeft = `${totalWidth}px`;
};

// 绑定切换事件（假设每个pane有对应的切换按钮）
document.querySelectorAll('.toggle-pane').forEach(btn => {
  btn.addEventListener('click', () => {
    const targetPane = document.getElementById(btn.dataset.paneId);
    targetPane.classList.toggle('hidden');
    updateMainOffset();
  });
});

关键细节说明

1. Pane布局：将三个pane放入一个固定定位的flex容器，既保持position:fixed不随main滚动，又通过flex横向排列避免重叠。
2. Main区域宽度：给main设置w-screen强制占满屏幕宽度，外层容器单独处理垂直滚动，避免出现全局水平滚动条。
3. 滑出效果：通过调整main容器的margin-left（等于可见pane总宽度）实现推移；若需要平滑动画，可替换为transform: translateX(${totalWidth}px)并添加transition: transform 0.3s ease属性。

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