CODEWITHSUNDEEP
javascriptscrollwheel
R. Oosterholt
R. Oosterholt

Reputation: 8110

Avoid scrolling scrollable elements when scrolling the page using the mousewheel

How can one prevent scrolling scrollable elements (e.g. text area, div with scrollbars) when using the mouse wheel to scroll the page?

when I use the mouse wheel to scroll the page vertically from top to bottom, I would like to ignore scrollable elements which happen to turn up under the mouse cursor.

I still want to scroll the "scrollable elements" when not scrolling the page but rather just hovering over the element and using the scroll wheel.

Upvotes: 1

Views: 60

Answers (2)

Sebastien C.
Sebastien C.

Reputation: 4833

You can do it simply with css : 

.something {
    overflow-y: hidden;
}
.something:hover {
    overflow-y: scroll;
}

http://jsfiddle.net/9Lx7a1v6/

Upvotes: 0

Mihai Scurtu
Mihai Scurtu

Reputation: 1478

Try using the plugin jquery-mousewheel (get it here) and doing something like this: 

$('.scrollable').mousewheel(function(e) {
   return false;
}

Where you add the class scrollable to said scrollable items.

Upvotes: 0

Related Questions