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

var fixedElement = document.getElementById("fixed");

function fixedScrolled(e) {
    var evt = window.event || e;
    var delta = evt.detail ? evt.detail * (-120) : evt.wheelDelta; //delta returns +120 when wheel is scrolled up, -120 when scrolled down
    $("#content").scrollTop($("#content").scrollTop() - delta);
}

var mousewheelevt = (/Gecko\//i.test(navigator.userAgent)) ? "DOMMouseScroll" : "mousewheel";
if (fixedElement.attachEvent)
    fixedElement.attachEvent("on" + mousewheelevt, fixedScrolled);
else if (fixedElement.addEventListener)
    fixedElement.addEventListener(mousewheelevt, fixedScrolled, false);

jsFiddle Demo – Scroll!