I am having an issue with a section where the left div is fixed and the right div is scrollable. However, the content of the right div scrolls even before the scroll top reaches the section. My goal is for the right div to scroll only when it reaches the top or bottom of the div (when scrolled up from the bottom), but currently, it scrolls inconsistently - sometimes starting in the middle of the section when I scroll fast.
Even when scrolling quickly up or down, the section can be skipped, and I would like it to never be skipped.
Please try scrolling both fast and slow. The scroll behavior is unpredictable:
Code:
.outer_div {
display: flex;
position: relative;
height: 600px;
overflow-y: scroll;
width: 100%;
}
.scroll-content-left {
position: sticky;
flex: 1 0 65%;
top: 0;
display: flex;
align-items: center;
justify-content: center;
}
.scroll-content-left>div {
height: 200px;
width: 400px;
background-color: black;
}
.scroll-content-right {
position: relative;
height: 100%;
right: 0;
flex: 1 0 35%;
}<div style="height: 600px; background-color: blue;"></div>
<div class="outer_div">
<div class="scroll-content-left">
<div></div>
</div>
<div class="scroll-content-right">
<div>
text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>
</div>
</div>
</div>
<div style="height: 600px; background-color: yellow;"></div>