scrollTop not working if inside div class="router-container"
Tags: angular, typescript
Published: 2022-04-01 14:03:05

 scrollTop not working if inside div class="router-container"
` <div class="router-container" cdkScrollable>
      <router-outlet></router-outlet>
    </div>`

`.router-container {
  overflow: auto;
  background-color: rgb($base-color-white);
}`

New Component

`<mat-table 
#table id="overview-trfList-tbl" name="overview-trfList-tbl"  (matSortChange)="sortData($event)" [dataSource]="dataSource" matSort class="table-height input-min-spacing table-flex overview-table">
        <!-- Name Column -->
          <ng-container matColumnDef="Name">
            <mat-header-cell *matHeaderCellDef  #nameSpan  sortActionDescription="Sort by Name" id="overview-trfList-header-name-btn" name="overview-trfList-header-name-btn">
            <span mat-sort-header id="overview-trfList-header-name-lbl" name="overview-trfList-header-name-lbl" >Name</span>
            <span #nameColumnFilterOverlay (click)="onNameFilterIconClicked($event)" id="overview-trfList-header-name-filter" name="overview-trfList-header-name-filter" class="overlay-icon">
              <span *ngIf="(displayNameFilterIcon || isNameFilterOverlayPopUpOpen) && !filterNameString"
                class="mat-tbl-icon icon-filter" matTooltipClass="tooltip-style" matTooltipPosition=above
                matTooltip="Filter name"></span>
              <span *ngIf="filterNameString" class="mat-tbl-icon icon-Filter-Applied"matTooltipClass="tooltip-style" matTooltipPosition=above
              matTooltip="Filter name active"></span>
            </span>
            </mat-header-cell>
            <mat-cell *matCellDef="let element; let i = index;">
              <div class="vertical-context" matTooltipClass="tooltip-style" matTooltipPosition=above [id]="'overview-trfList-name-val-'+ i" [name]="'overview-trfList-name-val-'+ i"
              matTooltip="{{element.Name}}" >{{element.Name}}</div>
            </mat-cell>
          </ng-container>  
<mat-header-row *matHeaderRowDef="displayedColumns;sticky:true"></mat-header-row>
          <mat-row *matRowDef="let row; let i = index; columns: displayedColumns;" class="element-grid-row"
          [id]="'overview-trfList-row-'+ i" [name]="'overview-trfList-row-'+ i"
          [routerLink]="['view',row.Code]" [class.selected]="selection.isSelected(row)"></mat-row>
        </mat-table>
      
      <div *ngIf="!dataSource.data || (dataSource.data.length === 0)" class="no-method overview-mt" id="overview-trfList-nodata-div" name="overview-trfList-nodata-div">
        <p id="overview-trfList-nodata-lbl" name="overview-trfList-nodata-lbl" [innerHtml]="NoData | linebreak" ></p>
      </div>
      <mat-paginator (page)="test()" #paginator id="overview-trf-table-pagination" name="overview-trf-table-pagination" [pageSize]="50" [pageSizeOptions]="[50, 100, 200]" showFirstLastButtons="true">
      </mat-paginator>`

ts File.
`  public test(): void {
    let mm = document.querySelector('.mat-sidenav-content');
    mm.scrollTop = 0;
  }`

**Above code Not working**

**If I remove ` <div class="router-container" cdkScrollable>` its working, but I need this Div**

My Requirement scrollTop should work with div