left div fixed right div scrollable doesn't work properly

user_5371665 0
Viewed 962

I have a section where a left div is fixed and the right div is scrollable but the right div content scrolls even before the scroll top reach the section. I want the right div to scroll only when it reaches the top of the div or bottom of the div (when scrolled up from the bottom) but it scrolls whenever it wants(inconsistent - when I scroll fast, it starts scrolling in the middle of the section, etc).

When I scroll up or down really fast, it even skips this section but I want it to be never skipped.

try scrolling fast and slow. the scroll works whenever it wants:

JSFiddle example

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>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>

flexbox css html jquery javascript
2 Answers

If you want the same effect as the one in the link you provided in the comments, you have to:

  1. Remove the overflow property of the sticky's parent div.
  • This one's worth stressing, because I think you expected otherwise, so: You just can't have it there. If you want to have sticky sections, there just isn't css that would make that inner scrollbar scroll.
  1. Set the top property of the sticky div.

Read this great tutorial. From your wording I think you think that the scroll-content-left and scroll-content-right divs are "scrolled", but they don't; it's just that the scroll-content-left is sticked.

.outer_div{
  display: flex;
  position: relative;
  height:100%;
  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 {
  position: sticky;
  top: 0;
  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>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>

JSFiddle.

user_30025840 

body {
  font-family: "Lato", sans-serif; font-size:12px;
}

.sidenav {
  height: 100%;
  width: 160px;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #111;
  overflow-x: hidden;
  padding-top: 20px;
}

.sidenav a {
  padding: 6px 8px 6px 16px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
}

.sidenav a:hover {
  color: #f1f1f1;
}

.main {
  margin-left: 160px; /* Same as the width of the sidenav */
  font-size: 15px; /* Increased text to enable scrolling */
  padding: 0px 10px;
}
<div class="sidenav">
  <a href="#about">About</a>
  <a href="#services">Services</a>
  <a href="#clients">Clients</a>
  <a href="#contact">Contact</a>
</div>

<div class="main">
 
  <h2>Sidebar</h2>
  <p>This sidebar is of full height (100%) and always shown.</p>
  <p>Scroll down the page to see the result.</p>
  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus. </p>
  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
</div>

user_147690630
Related