Why is wheel scrolling event not firing when mouse is over a "position: fixed" element?

Question

Here is a simple test case for my problem :

http://jsfiddle.net/JZmvf/20/

• put mouse over the red square
• scroll with mouse wheel
• the parent div is not scrolling

How to make the parent div normally scroll with mouse wheel, even when the mouse is over the position: fixed element ?

Thanks.

Answer 1

Its very late for an answer but I was able to overcome this problem by adding pointer-events: none style to the "fixed" div.

Like this: http://jsfiddle.net/JZmvf/55/

Answer 2

Elements with position: fixed; are positioned relative to the viewport, so the scrollable div is not the parent of the fixed div in this case, even though it may appear that way if you're just looking at the output.

If you position your cursor over the fixed div and scroll down, your browser is being told to scroll down the fixed div. Fixed elements, by nature, are not scrollable, so nothing happens.

You may want to add a few more details about exactly what you're trying to accomplish. Hope that helps!