始终在父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

改变你的sass，将滚动放在父级上，而不是放在孩子上。

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

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