Dispatch mouse wheel event on another DOM element

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