javascript - 适当协调两个滚动区域

Question

我正在尝试协调两个 div 的滚动，similar to this question ，但我的两个 div 都是可滚动的(而在问题中，一个 div 是控件，另一个是从属控件，用户可以滚动其中一个，而其他 div 则相应地重新滚动)。

我的 jQuery/JavaScript 是:

// as the user scrolls one div, we also scroll the other

var scrolldiv1 = $('#scrolldiv1'),
    scrolldiv2 = $('#scrolldiv2');

scrolldiv1.scroll(function () { scrolldiv2.scrollTop(scrolldiv1.scrollTop()); });
scrolldiv2.scroll(function () { scrolldiv1.scrollTop(scrolldiv2.scrollTop()); });

当用户使用元素的滚动条滚动 div 时，一切都运行得很漂亮。当用户在将鼠标悬停在元素上时使用他或她的鼠标滚轮滚动 div 时，div 保持同步但滚动非常缓慢。我怀疑这两个事件都在触发，并且这些位置相互争斗。

有没有人对我可以做些什么来使滚轮滚动与滚动条启动的滚动一样快速有任何建议？

提前致谢!

Answer 1

我能够通过添加超时事件来延迟触发伴随 div 的滚动来解决我的问题。

scrolldiv1.scroll(function () {
    setTimeout(function () { scrolldiv2.scrollTop(scrolldiv1.scrollTop()); }, 200);
});
scrolldiv2.scroll(function () {
    setTimeout(function () { scrolldiv1.scrollTop(scrolldiv2.scrollTop()); }, 200);
});