始终在父div的视口中显示高度滚动条

Question

我使用React-Table作为表格组件。在其中，基本上会看到以下情况：https://codesandbox.io/s/52lvxrj8r4

主体的垂直滚动条正在执行其操作，但是它在父div的视口之外，后者进行水平滚动。意味着只有将水平滚动条完全向右滚动时，您才能看到垂直滚动条。

我的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;
  }
}

是否有可能确保垂直滚动条始终显示在其父级的视口中，而与水平滚动条的位置无关？

Answer 1

更改您的自嘲，将滚动条放在父级而不是子级上。

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

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