手动触发DOM元素的滚动事件？

Question

我有两个独立的web元素，如果我滚动一个元素的内容，我也希望第二个元素同时滚动。以下是一个示例：https://stackedit.io

我执行了以下代码，但它无效：

element.find('.fullscreen-mk-content-textarea').on('scroll', function(e){
    // first element will trigger this event, then manully trigger the 
    // the scroll of the 2nd element. It's my plan. 
    console.log(e); // works
    element.find('.right-side').trigger('scroll'); // doesn't work...
});

我该怎么办？

Answer 1

Vanilla Javascript

var el = document.querySelector(".right-side");

el.dispatchEvent(new Event('scroll'));

Answer 2

您可以设置另一个的scrollTop值以匹配。这将导致它滚动所需的数量。这是你如何滚动的东西。它不会通过尝试触发滚动事件来滚动它。滚动事件是某些滚动动作的指示器，而不是导致滚动动作的指示。

如果使用jQuery，您可以使用.scrollTop()来检索滚动的当前值，或使用.scrollTop(val)来设置滚动量。

Answer 3

试试这个jsFiddle。

$('.e1').scroll(function(e){
    $('.e2').scrollTop(parseInt($('.e1').scrollTop()));
});