CODEWITHSUNDEEP
angularangular-materialscrollbarangular8
Thomas GM
Thomas GM

Reputation: 27

Synchronize 2 separate scrollbars in Angular 8

I have a sidenav inside of another sidenav, each with their own scrollbar. I want to find a way to synchronize both of them so when one scrolls up or down the other one does the same.

Here's the code structure in my HTML file:

<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>

The scrollbars are from the mat-sidenav-containers. I want to sychronize the scrollbars from container 1 and container 2.

Here's an image of the scrollbars: enter image description here

I've tried some things but none work. What can I try?

Upvotes: 0

Views: 1486

Answers (1)

SRM Kumar
SRM Kumar

Reputation: 123

Probably by using HTMLElement and with scroll event we can achieve this. I have update the code snippet with scroll event for both the mat-sidenav's

  1. First mat-sidenav add this event (scroll)="updateLeftScroll(scrollOne, scrollTwo)" #scrollOne
  2. Second mat-sidenav add this event (scroll)="updateRightScroll(scrollTwo, scrollOne)" #scrollTwo

As shown below

.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;
  }

Note: the above two lines of code enough to sync the two scroll bars, If need any other logic need to perform can write our own logic in the methods.

Upvotes: 1

Related Questions