javascript - 如何在javascript中双重滚动

Question

我有两张 table 。它们都是可滚动的。我如何复制滚动，例如表 1 正在滚动，表 2 也可能滚动或反向。
在下图中，您可以看到概念。不幸的是，我还没有任何代码。

Answer 1

想象两个像

<div class="area dos">
  <div class="move" [style.top]="top">
  "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
  </div>
  </div>
<div class="area uno" #one (scroll)="scroll(one)">
  "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
</div>

功能滚动就像

scroll(one:any)
  {
    this.top=-one.scrollTop+'px'
  }

“关键”是“区域dos”有相对位置，“移动”位置是绝对的，所以我们可以改变“移动”div的[style.top]

您可以在 stackblitz 中查看