How to avoid scrollbar stacking

user_1069219 0
Viewed 101

I have 2 scrollbars in a HTML file. Scrollbar a is short, and scrollbar b is larger. When scrolling in Scrollbar a reaches the end, scrollbar b takes the focus and starts scrolling. How can I avoid this effect? I want when I have the mouse over a scrollbar only to be handled by that scrollbar a, not the b.

document.getElementById('left').onmousewheel = function(e, d) { 
   if((this.scrollTop === (this.scrollHeight - this.offsetHeight) && d < 0)
    || (this.scrollTop === 0 && d > 0)) {
     e.preventDefault();
   }
}
html, body { height: 100vh; margin: 0; }

.container {
  width: 100vw;
  height: 100vh;
  background: aqua;
  margin: auto;
  padding: 1px;
}

#right {
  margin-left: 20vw;
  height: 200vh;
  background: yellow; 
}

.static {
  height: 50px;
  background: green;
}

#left {
  width: 20vw;  
  background: red;
  float: left;
  position: fixed;
}

#middle {
  height: calc(100vh - 15px);
  overflow-y: scroll;
}
<section class="container">
  <div id="left">  
    <div id="middle">
      <h2>Left</h2>
      <p style="height: 9001px;">Lorem ipsum</p>
      <p>Lorem ipsum</p>
    </div>  
  </div>
  <div id="right" class="scroll">
    <h2>Right</h2>
    <p style="height: 300px;">Lorem ipsum</p>
    <p>Lorem ipsum</p>
  </div>
</section>

When you scroll in left, keep the mouse on left and then start scrolling again right will start scrolling. I'm trying to guess if this could be done only using CSS as I'm trying to avoid Javascript.

Thanks!

css html
1 Answers

You have to prevent scrolling of parent event when position of inner element scroll reaches the bottom.

document.getElementById('left').onmousewheel = function(e, d) { 
   if((this.scrollTop === (this.scrollHeight - this.offsetHeight) && d < 0)
    || (this.scrollTop === 0 && d > 0)) {
     e.preventDefault();
   }
}

or you can add below CSS

section {  
 overscroll-behavior: none;
}
user_36293630
Related