Forwarding mouse scroll event to another div using JavaScript

Question

The title pretty much describes my purpose. Here is the code [only works on WebKit]:

We have two divs, elem1 and elem2. There is also one text box called logger to display the result. elem1 has some overflow text: scroll.

function eventHandler(e){
    var myEvt = new e.constructor(e.type, e);
    document.getElementById('elem1').dispatchEvent(myEvt);
}

function elem1MouseScroll(e){
    document.getElementById('logger').value='mousescroll on ' + (e.target || e.srcElement).id + ' at (' + e.clientX + ', ' + e.clientY + ')';
}

document.getElementById('elem1').addEventListener('mousewheel', elem1MouseScroll, false);               
document.getElementById('elem2').addEventListener('mousewheel', eventHandler, false);    

http://jsfiddle.net/s4hwt886/1

[Scrolling the mouse wheel on the blue div should be redirected to the pink div. The text box at the top shows the result.]

As you can see, although the mousewheel event from elem2 fires the same thing on elem1, unfortunately, the content inside elem1 does not actually scroll.

. - ? , Gecko. Gecko, . .

: Chrome , . Gecko. , Firefox , Safari. , , . : http://jsfiddle.net/s4hwt886/2/

N.B. JQuery. , , JQuery.

Answer 1

, .