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

标题非常符合我的目标。以下是代码[仅限于WebKit]：使用JavaScript将鼠标滚动事件转发到另一个div

我们有两个div，elem1 & elem2。还有一个称为记录器的文本框来显示结果。 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);

上蓝色的div

http://jsfiddle.net/s4hwt886/1

[鼠标滚轮滚动应该被转发到的粉红色的div。上面的文本框显示了结果。]

正如您所看到的，即使elem2的mousewheel事件在elem1上触发相同，不幸的是，elem1中的内容并不实际上滚动。

我很困惑。谁能帮忙？你不必担心在Gecko部分不工作。构造函数技巧在Gecko中不起作用，所以代码会稍微大一些。这就是为什么我没有把它包括在小提琴中。

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

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

来源

2014-08-28 Spero

你的小提琴适合我。 – denisol 2014-08-28 18:06:48

在任何浏览器上？ – Spero 2014-08-29 18:55:40

你说得对FF。 – denisol 2014-09-01 10:56:16

你的小提琴似乎在铬上描述的工作。

来源

2014-08-28 18:10:49 tetram

谢谢。我只是注意到了。不幸的是，这在Firefox或Safari中不起作用。我可以忽略Safari，但我不能忽视Firefox。我已经在这里上传了壁虎版本：http://jsfiddle.net/s4hwt886/2/。 – Spero 2014-08-28 19:04:25

刚刚尝试过最新的Chrome（56），它不再工作。任何人都知道为什么？ – elmart 2017-02-02 16:16:54

我遇到同样的问题。我的猜测是，这是因为该事件不是一个值得信赖的事件。但也可能是一个错误：/ – Grsmto 2017-04-14 21:51:19

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

回答

相关问题