CODEWITHSUNDEEP
cssscrollcss-positionmousewheel
user1709931
user1709931

Reputation: 81

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

Here is a simple test case for my problem :

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

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

Thanks.

Upvotes: 8

Views: 3711

Answers (3)

Turtle4Man
Turtle4Man

Reputation: 191

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

Upvotes: 0

Vivek
Vivek

Reputation: 4886

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/

Upvotes: 5

zxqx
zxqx

Reputation: 5205

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!

Upvotes: 1

Related Questions