如何让#horizontal_scroll的水平滚动条显示在屏幕底部而非元素底部？

现有一个高度为150vh的#horizontal_scroll元素，其子元素宽度为父元素的2倍。当前该元素的水平滚动条需滚动到页面底部才会显示在元素末端，能否将其显示在屏幕底部（100vh位置）？

原代码 #

CSS #

#horizontal_scroll {
  background: grey;
  width: 50vw;
  height: 150vh;
  overflow: auto;
}
#horizontal_scroll div {
  width: 100vw;
}

HTML #

<div id="horizontal_scroll">
<div></div>
</div>

解决方案 #

可以实现，核心是拆分垂直滚动与水平滚动的容器，让水平滚动条绑定在屏幕高度的外层容器上：

修改后的代码 #

HTML

<div class="scroll-container">
  <div id="horizontal_scroll">
    <div></div>
  </div>
</div>

CSS

.scroll-container {
  width: 50vw;
  height: 100vh;
  overflow-x: auto;
  overflow-y: hidden;
}

#horizontal_scroll {
  background: grey;
  height: 150vh;
  overflow-y: auto;
}

#horizontal_scroll div {
  width: 100vw;
}

原理说明 #

• 外层.scroll-container固定为100vh高度，仅开启水平滚动，其滚动条会直接显示在屏幕底部位置
• 内层#horizontal_scroll保持150vh高度并开启垂直滚动，负责处理长内容的垂直滚动逻辑
• 子元素的宽幅需求不受影响，仍能触发外层容器的水平滚动

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