使用JavaScript将鼠标滚动事件转发到另一个div

Question

标题几乎描述了我的目标.这是代码[仅适用于WebKit]:

我们有两个div,elem1和elem2.还有一个名为logger的文本框来显示结果.elem1有一些带溢出的文本:滚动.

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

[蓝色div上的鼠标滚轮滚动应该转发到粉红色div.顶部的文本框显示结果.]

正如您所看到的,即使来自elem2的mousewheel事件在elem1上触发相同,遗憾的是elem1中的内容实际上并未实际滚动.

我很困惑.有人可以帮忙吗？您不必担心Gecko部分无法正常工作.构造函数技巧在Gecko中不起作用,因此代码会更大一些.这就是为什么我没有把它包括在小提琴中.

编辑:在Chrome中,这个小提琴就像我想要的那样.所以我更新了代码以支持Gecko.不幸的是,Firefox表现得像Safari一样.转发事件正在触发,我可以在日志文本框中看到它,但内容不滚动.这是更新的小提琴:http://jsfiddle.net/s4hwt886/2/

NB我想要一个非Jquery解决方案.我能找到的所有其他类似线程都与Jquery有关.