正确协调两个滚动区域

Question

我正在尝试协调两个 div 的滚动，similar to this question，但我的两个 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);
});