div class="router-container"안에 있는 경우 scrollTop이 작동하지 않음
3624 단어 angulartypescript
<div class="router-container" cdkScrollable>
<router-outlet></router-outlet>
</div>
.router-container {
overflow: auto;
background-color: rgb($base-color-white);
}
새 구성요소
`<매트 테이블
table id="overview-trfList-tbl" name="overview-trfList-tbl" (matSortChange)="sortData($event)" [dataSource]="dataSource" matSort class="테이블 높이 입력 최소 간격 테이블 -플렉스 개요 테이블">
<!-- 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>
[id]="'overview-trfList-row-'+ i"[이름]="'overview-trfList-row-'+ i"
[routerLink]="['view',row.Code]"[class.selected]="selection.isSelected(row)">
<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 파일.public test(): void {
let mm = document.querySelector('.mat-sidenav-content');
mm.scrollTop = 0;
}
위 코드 작동하지 않음
<div class="router-container" cdkScrollable>
를 제거하면 작동하지만 이 Div가 필요합니다.
내 요구 사항 scrollTop은 div와 함께 작동해야 합니다.
Reference
이 문제에 관하여(div class="router-container"안에 있는 경우 scrollTop이 작동하지 않음), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://dev.to/idgo/scrolltop-not-working-if-inside-div-classrouter-container-fn7
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
<!-- 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>
<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>`
let mm = document.querySelector('.mat-sidenav-content');
mm.scrollTop = 0;
}
Reference
이 문제에 관하여(div class="router-container"안에 있는 경우 scrollTop이 작동하지 않음), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/idgo/scrolltop-not-working-if-inside-div-classrouter-container-fn7텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)