將垂直滾動條保持在獨立於水平滾動的固定位置

Question

我目前有一個網格設置，看起來像這樣：

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

基本上我想做的是在整個grid-container上放置一個overflow-x （這樣水平滾動會將標題和行一起滾動），但只需row-container上放置一個overflow-y: overlay （這樣向下滾動只會滾動行並將網格標題保持在固定位置。

我能做到這一點，它看起來還好，但是，在垂直滾動條row-container是在最右側的row-container 。 我希望它是可見的並處於固定位置（類似於在整個grid-container上放置一個overflow-y外觀，除非不影響標題）。

抱歉，我知道我可能解釋得不好，但這里有一個 JSFiddle，希望能說明我遇到的問題： https ://jsfiddle.net/4xwd5yzp/

請注意，在那個小提琴中，當您滾動到行容器的末尾時，您只能看到垂直滾動條。

預先感謝您的任何幫助。 理想情況下，我更喜歡只使用 HTML + CSS 的解決方案，但如果絕對必要，我也願意使用 vanilla JS + jQuery。

編輯：這是它目前如何工作的一個例子（不理想）：

這是我希望它看起來如何的照片：

Answer 1

你非常接近，如果你從.row-container中.row-container overflow-y樣式並將其添加到.grid-container並添加position: sticky; 和background: white; 到.headers那么我相信它會按照你想要的方式工作。

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%;
    }
  `