I have a web page with scrollable div on it. On top of scrollable div I have absolutely positioned div that overlaps half of scrollable div.

When I put mouse cursor over scrollable div I can scroll it with mouse wheel. But when I move cursor over overlapping div then mouse wheel stops scroll that div (and this is correct behavior because absolute positioned div is not inside scrollable div).

Question: how to pass or dispatch scroll event received by absolute positioned div to this underlying scrollable div to make this absolute positioned div 'transparent' for mouse wheel events.

I could get it work in Chrome, but not in IE and Firefox. How to rewrite this code to get it work in IE and Firefox?

if ($.browser.webkit) {    
    $(".overlap-container").bind("mousewheel", function (e) {

        var origEvent = e.originalEvent;
        var evt = document.createEvent("WheelEvent");
        evt.initWebKitWheelEvent(
        origEvent.wheelDeltaX,
        origEvent.wheelDeltaY,
        window,
        0,
        0,
        0,
        0,
        origEvent.ctrlKey,
        origEvent.altKey,
        origEvent.shiftKey,
        origEvent.metaKey);

        $(".scroll-container").get(0).dispatchEvent(evt);
    });
}

See example here:

EDITED: This issue originally is from jqGrid - frozen columns don't react mouse wheel scrolling.

In Chrome and Firefox awesome CSS property is supported: pointer-events:none

I have a web page with scrollable div on it. On top of scrollable div I have absolutely positioned div that overlaps half of scrollable div.

When I put mouse cursor over scrollable div I can scroll it with mouse wheel. But when I move cursor over overlapping div then mouse wheel stops scroll that div (and this is correct behavior because absolute positioned div is not inside scrollable div).

Question: how to pass or dispatch scroll event received by absolute positioned div to this underlying scrollable div to make this absolute positioned div 'transparent' for mouse wheel events.

I could get it work in Chrome, but not in IE and Firefox. How to rewrite this code to get it work in IE and Firefox?

if ($.browser.webkit) {    
    $(".overlap-container").bind("mousewheel", function (e) {

        var origEvent = e.originalEvent;
        var evt = document.createEvent("WheelEvent");
        evt.initWebKitWheelEvent(
        origEvent.wheelDeltaX,
        origEvent.wheelDeltaY,
        window,
        0,
        0,
        0,
        0,
        origEvent.ctrlKey,
        origEvent.altKey,
        origEvent.shiftKey,
        origEvent.metaKey);

        $(".scroll-container").get(0).dispatchEvent(evt);
    });
}

See example here: http://jsfiddle/HAc4K/5

EDITED: This issue originally is from jqGrid - frozen columns don't react mouse wheel scrolling.

In Chrome and Firefox awesome CSS property is supported: pointer-events:none

• javascript
• html
• dom

4 Answers 4

Looks like a known issue with jQuery: OriginalEvent not supported in IE

The short answer: you use wrong parameters of initWheelEvent in the demo in case of usage Internet Explorer. The method should have 16 parameters described in the documentation. Yo use currently only 11 parameters the same which have initWebKitWheelEvent, but the meaning of all parameters of initWheelEvent is absolutely another. You have to fix the parameters of initWheelEvent.

Use RetargetMouseScroll(overlap container, scroll container).

I realize this isn't exactly what you're looking for, but at least in Chrome, IE7+, and Firefox 3.5+ this does what you ask - scroll the underlying div when the div overlaying it receives scroll events:

http://jsfiddle/b9chris/yM3qs/

It's doing so simply because the overlapping div is a child of the div it overlaps - no jquery passing on any mousewheel events (although it is listening to scroll to ensure the overlapping div stays where it needs to be).

Implementing that kind of workaround in jqGrid might require upending a fair bit of code there, however.

HTML:

<div id=under>
    (content goes here)
    <div id=over></div>
</div>

CSS:

#under {
    position: absolute;
    left: 0; top: 0;
    width: 220px; height: 200px;
    overflow-y: scroll;
}

#over {
    position: absolute;
    left: 1px; top: 100px;
    width: 200px; height: 100px;
    z-index: 2;
}

JS:

(function() {
    $('#under').on('scroll', function() {
        $('#over').css('top', $(this).scrollTop() + 100);
    });
})();