How to scroll only mouse pointer content on scroll?

Question

Consider that my mouse positioned on Sidebar and I use the mouse wheel to scroll to the bottom or top of Sidebar. When I reach the bottom of Sidebar and keep scrolling with the wheel, it will begin to scroll Main Content. I would like the mouse wheel to only scroll the current div that the cursor is sitting on.

Is this possible with CSS? Or do I need to wire up JS/jQuery events to detect the div I am currently on and stop the scroll event? I am hoping there is a CSS solution to this.

Thanks In Advance

May you share an minimal reproducible example of how this is built so far? — evolutionxbox
– evolutionxbox, Commented Mar 16, 2021 at 10:40
Noticed a similar post answered already. Please check if this post solves your problem. stackoverflow.com/questions/32169383/… — Gaurav Mall
– Gaurav Mall, Commented Mar 16, 2021 at 11:34

Behemoth · Accepted Answer · 2021-03-18 14:54:42Z

1

It should just work with regular CSS. Try handling both sections as separat containers. Here is a simplified example i built based on your illustration:

.sidebar {
  height: 100vh;
  width: 30%;
  float: left;
  overflow-y: scroll;
  background-color: rgb(83, 83, 83);
}

.main-content {
  height: 100vh;
  width: 70%;
  float: left;
  overflow-y: scroll;
  background-color: rgb(139, 139, 139);
}

.content {
  height: 500vh;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 3em;
}

 <div class="sidebar">
  <div class="content">Sidebar</div>
</div>
<div class="main-content">
  <div class="content">Main Content</div>
</div>

answered Mar 18, 2021 at 14:54

Behemoth

9,6135 gold badges28 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to scroll only mouse pointer content on scroll?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related