css - 始终在父 div 的视口(viewport)中显示高度滚动条

Question

我使用 React-Table 作为表格组件。在那里，我基本上看到了以下场景:https://codesandbox.io/s/52lvxrj8r4

正文的垂直滚动条正在执行它的操作，但是，它在执行水平滚动的父 div 的视口(viewport)之外。这意味着当您将水平滚动条完全滚动到右侧时，您只会看到垂直滚动条。

我的 html 是:

<div class="rt-table">
   <div class="rt-tbody">
      test
      <br />
      test
      <br />
      (repeat test<br /> many times)
   </div>
</div>

我的 SASS 是:

.rt-table {
  width: 600px;
  height: 600px;
  overflow-y: hidden;
  .rt-tbody {
    height: 1000px;
    width: 1000px;
    overflow-x: auto;
    overflow-y: scroll;
  }
}

是否有可能确保垂直滚动条始终显示在其父级的视口(viewport)内，而不管水平滚动条的位置如何？

Answer 1

更改您的 sass 以将滚动放在父级而不是子级上。

在创建可滚动容器时，始终确保较小的外部容器是包含滚动条的容器，否则您的滚动条可能会被隐藏。

.rt-table {
  width: 600px;
  height: 600px;
  overflow-y: scroll;
  .rt-tbody {
    height: auto;
    width: 1000px;   
  }
}