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

【问题标题】：Manually trigger a scroll event of DOM element?手动触发 DOM 元素的滚动事件？
【发布时间】：2019-06-30 22:59:24
【问题描述】：

我有两个独立的网页元素，如果我滚动一个元素的内容，我还希望第二个元素同时滚动。这是一个例子：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...
});

我该怎么办？

【问题讨论】：

Romeo 的答案确实有效，只是不要忘记 ID 选择器使用哈希（#）而不是句号（。）希望这对像我这样的初学者有帮助，他们试图找出如何触发事件滚动。

标签： javascript jquery

【解决方案1】：

原版 Javascript

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

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

【讨论】：

是否有 jQuery 代码可以做同样的事情？
如果.trigger('scroll') 不起作用，那么$(document).get(0).dispatchEvent(new Event('scroll'));

【解决方案2】：

试试这个jsFiddle。

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

【讨论】：

【解决方案3】：

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

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

【讨论】：

完美！非常感谢~