Dispatch mouse wheel event on another DOM element

Question

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.net/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

Answer 1

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

Answer 2

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.