CODEWITHSUNDEEP
javascripthtmljquerycssuser-interface
Jon Warren
Jon Warren

Reputation: 857

Keep vertical scrollbar in a fixed position independent of horizontal scroll

I currently have a grid set up that looks something like this:

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

Essentially what I'd like to do is place an overflow-x on the entire grid-container (so that scrolling horizontally will scroll both the headers and the rows together), but just place an overflow-y: overlay on the row-container (so that scrolling down will only scroll through the rows and keep the grid headers in a fixed position.

I was able to do that and it looks okay, however, the vertical scrollbar on the row-container is at the far right of the row-container. I'd like it to be visible and in a fixed position (similar to how it would look if you were to place an overflow-y on the entire grid-container except without affecting the headers).

Sorry I know I probably explained this poorly, but here's a JSFiddle that should hopefully illustrate the problem I'm having: https://jsfiddle.net/4xwd5yzp/

Notice in that fiddle, you can only see the vertical scrollbar when you scroll to the end of the row-container.

Thank you in advance for any help. Ideally, I'd prefer a solution using just HTML + CSS, but I'm also open to use vanilla JS + jQuery if absolutely necessary.

EDIT: Here is an example of how it currently works (not ideal): Incorrect

And here is a photo of how I want it to look: enter image description here

Upvotes: 1

Views: 2885

Answers (2)

pretzelhammer
pretzelhammer

Reputation: 15105

You were very close, if you take the overflow-y style off of .row-container and add it to .grid-container and also add position: sticky; and background: white; to .headers then I believe it'll work how you want it to.

Upvotes: 2

Anil Kumar
Anil Kumar

Reputation: 100

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

Upvotes: 0

Related Questions