html - 如何强制溢出元素从顶部开始

Question

我有一个<mat-drawer-container>包含一个<mat-selection-list>. 每当<mat-selection-list>有足够的元素溢出时，滚动不会在渲染元素时从顶部开始。它从列表中的第一个元素开始，它隐藏了titleand subtitle。有没有办法强制滚动开始和顶部？

[编辑] 我知道我可以利用类似 scrollTo() 的东西，但它似乎是 hack-y，我正在尝试为此确定最佳实践方法。

<mat-drawer-container class="container">
    <mat-drawer #drawer (openedChange)="onOpenedChange($event)" class="sidenav" mode="push" opened>
        <p class="drawer-title">Data Validation</p>
        <p class="drawer-subtitle">{{integrationName}}</p>
        <mat-selection-list [multiple]="false">
            <mat-list-option (click)="getTableNames(date)" (click)="drawer.toggle()" class="date-item" *ngFor="let date of dataServiceDates">
                {{date}}
                <mat-divider></mat-divider>
            </mat-list-option>
        </mat-selection-list>
    </mat-drawer>
</mat-drawer-container>

标签： htmlangularangular-material

Answer 1

<mat-selection-list>kind 伪选择<mat-list-option>'s 集合中的第一项。这可以通过默认所有的来[selected] Input()禁用false

修复程序如下所示：

<mat-drawer-container class="container">
    <mat-drawer #drawer (openedChange)="onOpenedChange($event)" class="sidenav" mode="push" opened>
        <p class="drawer-title">Data Validation</p>
        <p class="drawer-subtitle">{{integrationName}}</p>
        <mat-selection-list [multiple]="false">
<!--here--> <mat-list-option [selected]="false" (click)="getTableNames(date)" (click)="drawer.toggle()" class="date-item" *ngFor="let date of dataServiceDates"> 
                {{date}}
                <mat-divider></mat-divider>
            </mat-list-option>
        </mat-selection-list>
    </mat-drawer>
</mat-drawer-container>