保持按钮禁用，直到用户到达 Angular Material 对话框中文本段落的末尾

Question

我使用

MatDialog

的

Angular Material

来显示文本段落和末尾的按钮。 如何使用 Angular / JavaScript 保持按钮禁用，直到用户向下滚动并到达该段落的底端？

Answer 1

您可以使用

scroll

事件来完成此操作：

<mat-dialog-content (scroll)="onScroll($event)">
  all your content here...
</mat-dialog-content>
<mat-dialog-actions align="end">
  <button [disabled]="buttonDisabled" mat-button>OK</button>
</mat-dialog-actions>

和 TS：

buttonDisabled = true;

onScroll(ev: any) {
  if (ev.target.offsetHeight + ev.target.scrollTop >= ev.target.scrollHeight) {
    this.buttonDisabled = false;
  }
}

Answer 2

在 HTML 中

<mat-dialog-content (scroll)="onScroll($event)">
  all your content here...
</mat-dialog-content>
<mat-dialog-actions align="end">
  <button [disabled]="buttonDisabled" mat-button>OK</button>
</mat-dialog-actions>

在 TS 中

onScroll(ev: any) {
if (Math.ceil(ev.target.getBoundingClientRect().height) + ev.target.scrollTop >= ev.target.scrollHeight) {
  this.data.buttonDisabled = false;
} }

我使用此代码来获取对话框内容的高度

Math.ceil(ev.target.getBoundingClientRect().height