I am experiencing an issue with two scrollbars in my HTML file. Scrollbar a is short, while scrollbar b is larger. When I scroll to the end of Scrollbar a, the focus shifts to Scrollbar b and it starts scrolling. Is there a way to prevent this from happening? I want the mouse to only interact with Scrollbar a when it is over that specific scrollbar, not Scrollbar 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>After scrolling in left, if the mouse remains on left and scrolling resumes, then right will also start scrolling. I'm exploring possibilities of achieving this behavior purely with CSS without resorting to Javascript.
Thank you!