Horizontal scroll: sticky element starts moving when scrolling to a certain point

Scenario: There are many rows… each row has a sticky element on the left, a larger content div on the right.

It should be possible to horizontally scroll all rows together and the sticky elements should stay on their initial position.

The issue: When scrolling further than the width of the scrollable container (minus the sticky element width), the sticky elements suddenly start scrolling together with their rows.

When giving the row a fixed width (large content width + sticky element width = 5300px) then it works. But of course, that is not a real solution.

The HTML looks like this:

<div class="container">
  <div class="row">
    <div class="row__sticky">Sticky</div>
    <div class="row__content">Large Content</div>
  </div>
  <div class="row">
    <div class="row__sticky">Sticky</div>
    <div class="row__content">Large Content</div>
  </div>
</div>

This is the styling:

.container {
  border: 3px solid lightgreen;
  overflow: auto;
  font-size: 24px;
}

.row {
  border: 5px solid red;
  white-space: nowrap;
  // width: 5300px; // dirty fix

  .row__sticky {
    display: inline-block;
    position: sticky;
    left: 0;
    width: 300px;
    background: white;
  }

  .row__content {
    display: inline-block;
    color: white;
    background: #ff9900
    width: 5000px;
  }
}

Here a codepen to play with: https://codepen.io/spierala-the-lessful/pen/VwoMjRW

To reproduce the issue, make sure to scroll far enough.

You need to sign in to view this answers

Related Post