在 Angular 8 中同步 2 个单独的滚动条

Question

我在另一个sidenav 中有一个sidenav，每个sidenav 都有自己的滚动条。我想找到一种方法来同步它们，这样当一个向上或向下滚动时，另一个也可以这样做。

这是我的 HTML 文件中的代码结构：

<mat-sidenav-container class="sidenav-container"> ---> CONTAINER 1

   <mat-sidenav class="sidenav" fixedInViewport="false" mode="side" role="navigation" opened="true" >
      <mat-nav-list>
          *group of mat-list-item*
      </mat-nav-list>
   </mat-sidenav>

   <mat-sidenav-content>

      <mat-sidenav-container class="sidenav-container"> ---> CONTAINER 2
          <mat-sidenav class="secondSidenav" fixedInViewport="false" mode="side" role="navigation" opened="true">
              <mat-nav-list>
                 *group of mat-list-item*
              </mat-nav-list>
          </mat-sidenav>
          <mat-sidenav-content> *something* </mat-sidenav-content>
       </mat-sidenav-container>

   </mat-sidenav-content>
</mat-sidenav-container>

滚动条来自 mat-sidenav-containers。我想同步容器 1 和容器 2 的滚动条。

这是滚动条的图像：

我尝试了一些方法，但没有任何效果。我可以尝试什么？

Answer 1

可能通过使用HTMLElement 和scroll 事件我们可以实现这一点。 我已经为 mat-sidenav's

更新了带有滚动事件的代码 sn-p

1. 首先 mat-sidenav 添加这个事件 (scroll)="updateLeftScroll(scrollOne, scrollTwo)" #scrollOne
2. 第二个 mat-sidenav 添加这个事件 (scroll)="updateRightScroll(scrollTwo, scrollOne)" #scrollTwo

如下图

.HTML

    <mat-sidenav-container class="sidenav-container">
   <mat-sidenav class="sidenav" fixedInViewport="false" mode="side" role="navigation" opened="true" (scroll)="updateLeftScroll(scrollOne, scrollTwo)" #scrollOne>
      <mat-nav-list>
          *group of mat-list-item*
      </mat-nav-list>
   </mat-sidenav>

   <mat-sidenav-content>

      <mat-sidenav-container class="sidenav-container">
          <mat-sidenav class="secondSidenav" fixedInViewport="false" mode="side" role="navigation" opened="true" (scroll)="updateRightScroll(scrollTwo, scrollOne)" #scrollTwo>
              <mat-nav-list>
                 *group of mat-list-item*
              </mat-nav-list>
          </mat-sidenav>
          <mat-sidenav-content> *something* </mat-sidenav-content>
       </mat-sidenav-container>

   </mat-sidenav-content>
</mat-sidenav-container>

.ts

   updateLeftScroll(scrollOne: HTMLElement, scrollTwo: HTMLElement){
     scrollTwo.scrollTop = scrollOne.scrollTop;
     scrollTwo.scrollBy = scrollOne.scrollBy;
  } 
  updateRightScroll(scrollTwo: HTMLElement, scrollOne: HTMLElement) {
    scrollOne.scrollTop = scrollTwo.scrollTop;
    scrollOne.scrollBy = scrollTwo.scrollBy;
  }

注意：以上两行代码足以同步两个滚动条，如果需要执行其他逻辑可以在方法中编写我们自己的逻辑。