1

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.

R. Oosterholt
  • 7,720
  • 2
  • 53
  • 77

2 Answers2

0

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.

Mihai Scurtu
  • 1,448
  • 1
  • 11
  • 22
  • edited my question; I still want to be able to scroll the elements when not scrolling the page, but just hover the element and using the scroll wheel... – R. Oosterholt Aug 22 '14 at 10:10
0

You can do it simply with css : 

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

http://jsfiddle.net/9Lx7a1v6/

Sebastien C.
  • 4,649
  • 1
  • 21
  • 32
  • Does not work (see [fiddle](http://jsfiddle.net/9Lx7a1v6/1/)). when you scroll the page and the div is scrolled 'under the mouse cursor', the div is scolled instead of the page. – R. Oosterholt Aug 22 '14 at 13:17