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

Question

我正在使用 Angular Material 的 MatDialog 来显示文本段落和末尾的按钮。 如何使按钮保持禁用状态，直到用户向下滚动并使用 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;
  }
}