Pass mousewheel event through fixed content

javascript jquery dom-events mousewheel
mrtsherman picture mrtsherman · Aug 24, 2011 · Viewed 9.1k times · Source

The best way to understand this is to look at this fiddle.

Notice how mouse wheel over the fixed content in the red box does nothing. I would like the scrollable div to scroll.

In case the fiddle dies - basically I have a scrollable div with a fixed element over it. Typically when you mouse wheel over a scrollable div it will of course scroll. But if you are over the fixed element instead then no scroll happens. Depending on your site layout this could be counter intuitive to a user.

jQuery solutions are okay.

Answer

Sam Martin picture Sam Martin · Aug 25, 2011

A much, MUCH simpler, but much less widely supported, answer is the following:

#fixed{ pointer-events:none; }

jsFiddle
Doesn't work in IE at all though unfortunately! But you could use modernizr or somesuch to detect whether it was supported and use the jQuery as a stop-gap where it isn't.

Courtesy of Mr. Dominic Stubbs

Related questions

jQuery.click() vs onClick

I have a huge jQuery application, and I'm using the below two methods for click events. First method HTML <div id="myDiv">Some Content</div> jQuery $('#myDiv').click(function(){ //Some code }); Second method HTML <…

Read More
Getting the ID of the element that fired an event

Is there any way to get the ID of the element that fires an event? I'm thinking something like: Except of course that the var test should contain the id "aaa", if the event is fired from the first form, …

Read More
window.onload vs $(document).ready()

What are the differences between JavaScript's window.onload and jQuery's $(document).ready() method?

Read More