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.

Instep

It scrolls fine in Windows 7/IE9, but doesn't scroll in Chrome. Even if you solved it for one browser, you could face the same problem across different platform/browser combinations so I wouldn't bother trying to fix it if I were you. – Goodden

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/

Marsland

You've saved my life man! I'm implementing a drag and drop library in react, and have been dealing with this for days – Breann

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!

Stowell

Answer 3

The pointer-events: none seems to work as long as you don't need any event in the fixed div

If you need events on it I found 2 solutions:

• Handling your page scroll on the html tag because it will capture the scroll event even on a fixed element which is easy but limiting
• Using position: sticky instead so the scroll event bubbling happens normally but you'll have to work on the CSS because sticky doesn't exactly do the same as fixed

Faradism