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`