手動觸發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

試試這個jsFiddle。

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

Answer 2

您可以將的值設置爲匹配。這將導致它滾動所需的數量。這就是你如何滾動的東西。它不會導致它通過嘗試觸發滾動事件來進行滾動。滾動事件是一些滾動動作的指示符，而不是導致滾動動作的指示符。

如果使用jQuery，則可以使用.scrollTop()檢索滾動的當前值或.scrollTop(val)以設置滾動量。

Answer 3

香草的Javascript

var el = document.querySelector(".right-side"); 
el.dispatchEvent(new Event('scroll'));