A way to scroll an underlying div when mouse is on top of a fixed div?

Question

The question is so long that coming up with a title that summarises it proved tricky.

So anyway. I have a div that has overflow: auto and that frequently does flow over so the scrollbar appears. Then I have a div that has position: fixed and is positioned on top of the content div.

Now when I have a fixed-positioned div over the html body itself, I can scroll the document with the wheel when I have my mouse over the div. Not so lucky with the aforementioned div.

Is there a way to scroll the div "through" the fixed-positioned one?

I noticed that even catching the scroll event when over the fixed div isn't easy; the event isn't fired unless the fixed div itself is scrollable.

I made a simple jsFiddle here and for your convenience stripped it of all the JavaScript I tried.

Edit: I need to retain other mouse functions with the fixed div so turning pointer-events off isn't the solution in my case.

Answer 1

What you are looking for is pointer-events: none;

This makes the pointer not interact with that div essentially, so just do

#fixed {
  pointer-events: none;
}

DEMO

And you will get your desired outcome with no JS required. This will stop all other interaction with the div though, if you need to interact with it for some reason I'm afraid you'll have to look into a JS solution.