使用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相关。
答
你的小提琴似乎在铬上描述的工作。
你的小提琴适合我。 – denisol 2014-08-28 18:06:48
在任何浏览器上? – Spero 2014-08-29 18:55:40
你说得对FF。 – denisol 2014-09-01 10:56:16