将垂直滚动条保持在与水平滚动无关的固定位置

Question

我目前有一个看起来像这样的网格：

<div class="grid-container">
  <div class="headers">...</div>
  <div class="row-container">
    <div class="row">...</div>
    ...
  </div>
</div>

基本上，我想做的是在整个网格容器上放置一个overflow-x（以便水平滚动将标题和行同时滚动），但是只需将overflow-y放置在：行容器（这样，向下滚动将仅滚动浏览各行，并将网格标题保持在固定位置。

我能够做到这一点，并且看起来还不错，但是行容器上的垂直滚动条位于行容器的最右侧。我希望它是可见的并固定在一个位置（类似于在不影响标题的情况下将y溢出放置在整个网格容器上的样子）。

对不起，我知道我可能对此解释不佳，但是这里有一个JSFiddle应该可以说明我遇到的问题：https://jsfiddle.net/4xwd5yzp/

请注意，当您滚动到行容器的末尾时，只能看到垂直滚动条。

在此先感谢您的帮助。理想情况下，我更喜欢只使用html + css的解决方案，但如果绝对必要，我也愿意使用香草JS + jQuery。

编辑：这是当前工作方式的一个示例（不理想）：

这是我希望它看起来的照片：

Answer 1

您非常接近，我将overflow-y的{​​{1}}样式从.row-container删除，并将其添加到.grid-container，然后将position: sticky;和background: white;添加到{{ 1}}，现在我相信它可以按您的意愿工作，并更新了小提琴：https://jsfiddle.net/4xwd5yzp/23/

Answer 2

 Update the width in % rather than px.
`
    .grid-container {
      border: 1px solid black;
      height: 200px;
      width: 99%x;
      white-space: nowrap;
      overflow-x: auto;
      overflow-y: hidden;
    }
    .row-container {
      height: 150px;
      width: 99%x;
      overflow-y: overlay;
    }
    .grid-cell {
      display: inline-block;
      width: 250px;
    }
    .headers {
      border-bottom: 1px solid black;
      height: 50px;
      width: 99%;
    }
    .row {
      border-bottom: 1px solid lightgray;
      height: 30px;
      width: 99%;
    }
  `