css - 启动时 Angular Material Dialog 组件滚动问题

Question

我在我的应用程序中使用 Angular Material Dialog 组件，在这个对话框中，我向用户展示了一个 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”以防止出现这种情况。

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