Question

我正在我的应用程序中使用Angular Material对话框组件，并且在此对话框中，我向用户显示一个HTML数据表，该表可能具有滚动条。

但是，我的问题是，当我单击按钮以打开实际对话框时，我注意到内容会立即滚动到底部，这很麻烦，因为我需要手动滚动回到顶部。

我使用的是此处所述的标准设置：

https://material.angular.io/components/dialog/overview

我的对话框如下：

myDialog(a: string, b: string) {
        let dialogRef = this.dialog.open(MyDialogComponent, {
            height: '500px',
            width: '800px',
            data: { a,b }
        });
}

如何避免这种滚动到最底层的问题？我尝试了一些CSS，例如top: 0; position: fixed;，但无济于事。

Answer 1

它发生在你身上的原因是，对话框组件自动聚焦在你的 HTML 内容中的第一个输入/按钮上。您应该将 'autoFocus: false' 添加到 Dialog 选项中以防止它。

myDialog(a: string, b: string) {
    let dialogRef = this.dialog.open(MyDialogComponent, {
        height: '500px',
        width: '800px',
        autoFocus: false,
        data: { a,b }
    });
}

Answer 2

将以下HTML代码移至页面顶部，解决了我的问题。

<mat-dialog-actions>
    <br>
    <button mat-raised-button type="button" mat-dialog-close (click)="closeDialog()" class="my-btn">
        Close
    </button>
</mat-dialog-actions>

启动时角度材料对话框组件滚动问题

2 个答案: