如何在嵌套div中实现始终可见的滚动条（CSS/JavaScript）

需要实现一个可整体垂直滚动的布局，要求：

• 右侧的垂直滚动条能同步滚动左右两列内容
• 左右两列各自支持独立的水平滚动
• 当前问题：垂直滚动条会遮挡两列底部的水平滚动条，导致水平滚动条无法始终显示，需要解决这个问题

现有实现代码 #

CSS代码 #

#data {
  background: grey;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  
  height: 400px;
  width: 500px;
}

#splitter {
  display: flex;
  flex-direction: row;
  background: darkgrey;
  overflow-x: hidden;
  overflow-y: auto;
  align-items:start;
}

#right-content {
  background: Gainsboro;
  overflow-x: auto;
  overflow-y: hidden;
}

#left-content {
  background: Gainsboro;
  overflow-x: auto;
  overflow-y: hidden;
}

div {
  margin: 10px;
}

p {
  padding: 2px;
  margin: 0px;
}

HTML代码 #

<div id="data">
  <div id="splitter">
    <div id="left-content">
      <p>LeftColumnLeftColumn</p>
      <p>LeftColumnLeftColumn</p>
      <p>LeftColumnLeftColumn</p>
      <p>LeftColumnLeftColumn</p>
      <p>LeftColumnLeftColumn</p>
      <p>LeftColumnLeftColumn</p>
      <p>LeftColumnLeftColumn</p>
      <p>LeftColumnLeftColumn</p>
      <p>LeftColumnLeftColumn</p>
      <p>LeftColumnLeftColumn</p>
      <p>LeftColumnLeftColumn</p>
      <p>LeftColumnLeftColumn</p>
      <p>LeftColumnLeftColumn</p>
      <p>LeftColumnLeftColumn</p>
      <p>LeftColumnLeftColumn</p>
      <p>LeftColumnLeftColumn</p>
      <p>LeftColumnLeftColumn</p>
      <p>LeftColumnLeftColumn</p>
    </div>
    <div id="right-content">
      <p>RightColumnWithLongTextThatShouldBeScrollableHorizontally</p>
      <p>RightColumnWithLongTextThatShouldBeScrollableHorizontally</p>
      <p>RightColumnWithLongTextThatShouldBeScrollableHorizontally</p>
      <p>RightColumnWithLongTextThatShouldBeScrollableHorizontally</p>
      <p>RightColumnWithLongTextThatShouldBeScrollableHorizontally</p>
      <p>RightColumnWithLongTextThatShouldBeScrollableHorizontally</p>
      <p>RightColumnWithLongTextThatShouldBeScrollableHorizontally</p>
      <p>RightColumnWithLongTextThatShouldBeScrollableHorizontally</p>
      <p>RightColumnWithLongTextThatShouldBeScrollableHorizontally</p>
      <p>RightColumnWithLongTextThatShouldBeScrollableHorizontally</p>
      <p>RightColumnWithLongTextThatShouldBeScrollableHorizontally</p>
      <p>RightColumnWithLongTextThatShouldBeScrollableHorizontally</p>
      <p>RightColumnWithLongTextThatShouldBeScrollableHorizontally</p>
      <p>RightColumnWithLongTextThatShouldBeScrollableHorizontally</p>
      <p>RightColumnWithLongTextThatShouldBeScrollableHorizontally</p>
      <p>RightColumnWithLongTextThatShouldBeScrollableHorizontally</p>
      <p>RightColumnWithLongTextThatShouldBeScrollableHorizontally</p>
      <p>RightColumnWithLongTextThatShouldBeScrollableHorizontally</p>          
    </div>
  </div>
</div>

解决方案 #

问题核心是垂直滚动容器的overflow-x: hidden属性，以及垂直滚动条对内部列水平滚动条的遮挡。通过以下调整即可解决：

1. 给垂直滚动容器#splitter添加padding-right，预留出垂直滚动条的宽度（现代浏览器通常为17px），避免遮挡内部列的水平滚动条
2. 移除#splitter的overflow-x: hidden，确保内部列的水平滚动区域完整显示
3. 给左右列添加flex-shrink: 0，防止列被容器压缩，保证水平滚动的空间

修改后的CSS代码 #

#data {
  background: grey;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  
  height: 400px;
  width: 500px;
}

#splitter {
  display: flex;
  flex-direction: row;
  background: darkgrey;
  overflow-y: auto;
  align-items: start;
  /* 预留垂直滚动条宽度，避免遮挡水平滚动条 */
  padding-right: 17px;
}

#right-content {
  background: Gainsboro;
  overflow-x: auto;
  overflow-y: hidden;
  /* 防止列被容器压缩 */
  flex-shrink: 0;
}

#left-content {
  background: Gainsboro;
  overflow-x: auto;
  overflow-y: hidden;
  /* 防止列被容器压缩 */
  flex-shrink: 0;
}

div {
  margin: 10px;
}

p {
  padding: 2px;
  margin: 0px;
}

如果需要适配不同浏览器的滚动条宽度差异，也可以通过JavaScript动态计算滚动条宽度后设置padding-right值，但固定17px在绝大多数现代浏览器中都能正常工作。

调整后，左右两列的水平滚动条会始终可见，同时整体垂直滚动依然能同步控制两列内容。

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