在2个div上同步滚动

Question

我有2个相同高度的可滚动div，我想以2种方式同步他们的滚动。

我在这里进行了一次堆栈闪电战：https://stackblitz.com/edit/angular-9-0-0-rc-1-sync-scroll?file=src/app/app.component.ts

我能看到的是，scroll事件弹了几次，它以非常慢的滚动结束，这不是流动的。

我不知道如何防止这种反弹，当用户在一个div中滚动时，滚动会在另一个div中报告，然后事件就会在那里结束。

我试过使用cdkScrollable，但在用户滚动到一个div的时刻和滚动到另一个div的时刻之间有一段很短的时间，我需要它是无缝的。

有什么想法吗？

Answer 1

所以问题是，当滚动第一个列表时，它更新了第二个列表，第二个列表也对滚动事件做出反应，并更新了第一个列表。我不确定这就是你在问题中所描述的，但无论如何，我修复它的想法是检查光标现在在哪里，并更新相反的列表。通过在类中添加额外的属性并在mouseenter事件中更新它，可以很容易地完成这项工作。

这是我的解决方案：https://stackblitz.com/edit/angular-9-0-0-rc-1-sync-scroll-m9jqr7?file=src/app/app.component.ts