如何为多个body div设置全局滚动条且排除rheader与cheader

• 仅为body区域设置全局滚动条，而非每个.body元素单独显示滚动条
• .rheader和.cheader需保持固定位置，滚动条不得覆盖这两个头部区域

原代码片段 #

HTML #

<div>
  <div>
    .
  </div>
  <div class="cheader">
    cheader
  </div>
  <div class="cheader">
    cheader
  </div>
  <div class="rheader">
    rheader
  </div>
  <div class="body">
    body
  </div>
  <div class="body">
    body
  </div>
  <div class="rheader">
    rheader
  </div>
  <div class="body">
    body
  </div>
  <div class="body">
    body
  </div>
</div>

CSS #

body > div {
  display: grid;
  grid-template:
    ". cheader cheader " 3rem
    "rheader body body " 3rem
    "rheader body body " 3rem
    / 10rem 1fr 1fr;
  width: 500px;
  height: 30px;
}

body > div div {
  border: 1px solid;
}

.body {
  overflow: scroll;
}

当前问题 #

• 给每个.body设置overflow: scroll会产生独立滚动条，不符合全局滚动需求
• 使用position: sticky固定头部后，滚动条会延伸覆盖头部区域
• 期望效果：滚动条仅存在于body内容区域，头部固定且不被遮挡

核心思路是用一个统一容器包裹所有body内容，让滚动条作用于这个容器，同时通过网格布局+sticky固定头部位置。

修改后的HTML #

<div class="grid-container">
  <div class="empty-cell">.</div>
  <div class="cheader">cheader</div>
  <div class="cheader">cheader</div>
  <div class="rheader">rheader</div>
  <!-- 新增容器包裹所有body元素 -->
  <div class="body-wrapper">
    <div class="body">body</div>
    <div class="body">body</div>
    <div class="body">body</div>
    <div class="body">body</div>
  </div>
  <div class="rheader">rheader</div>
</div>

修改后的CSS #

.grid-container {
  display: grid;
  grid-template:
    ". cheader cheader " 3rem
    "rheader body-wrapper body-wrapper " 1fr
    "rheader body-wrapper body-wrapper " 1fr
    / 10rem 1fr 1fr;
  width: 500px;
  height: 200px; /* 设置容器高度，触发滚动 */
  overflow: hidden; /* 隐藏容器自身滚动条 */
}

.grid-container div {
  border: 1px solid;
}

.cheader {
  position: sticky;
  top: 0;
  background: #fff; /* 避免被滚动内容遮挡 */
}

.rheader {
  position: sticky;
  left: 0;
  background: #fff; /* 避免被滚动内容遮挡 */
}

.body-wrapper {
  grid-area: body-wrapper; /* 占据所有原body单元格区域 */
  overflow-y: auto; /* 仅垂直滚动，按需调整为overflow: auto */
  padding-right: 10px; /* 避免滚动条覆盖内容，可根据需求调整 */
}

关键说明 #

1. 新增.body-wrapper容器，让所有body内容统一滚动，解决独立滚动条问题
2. 调整网格布局，让.body-wrapper占据原所有body的单元格位置
3. 给头部设置position: sticky+背景色，确保固定且不被滚动内容遮挡
4. 滚动条仅作用于.body-wrapper，不会覆盖头部区域

内容的提问来源于stack exchange，提问作者ほたく