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
Leave feedback about this