使用 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 的鼠标滚轮事件在 elem1 上触发了相同的事件，但遗憾的是 elem1 中的内容实际上并没有滚动。

我很困惑。任何人都可以帮忙吗？您不必担心在 Gecko 部分不起作用。构造函数技巧在 Gecko 中不起作用，因此代码会稍大一些。这就是为什么我没有将它包含在小提琴中。

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

注意我想要一个非 Jquery 解决方案。我能找到的所有其他类似线程都处理 Jquery。

Answer 1

您的小提琴似乎按照 chrome 上的说明工作。