AG Grid：如何将滚动条固定在底部

Question

我正在使用 AG Grid Angular 创建一个日志视图，我会每秒向网格添加很多条目，通常这种类型的视图在底部有最新的条目，所以它如果有一种好方法可以让滚动条停留在底部，那就太好了，这样我总能看到最新的条目。一个好处是，如果我可以手动向上滚动并且滚动将停留在这个位置。

Answer 1

这是一种方法：

在您的标记中处理 rowDataChanged：

<ag-grid-angular
  class="ag-dark"
  [rowData]="messages"
  [columnDefs]="columnDefs"
  [gridOptions]="gridOptions"
  (bodyScroll)="handleScroll($event)"
  (rowDataChanged)="handleRowDataChanged($event)">
</ag-grid-angular>

在 rowDataChanged 的处理程序中，调用 ensureVisibleIndex 滚动到添加的最后一行：

  gridOptions: GridOptions = {
    suppressScrollOnNewData: true,
  }
  handleRowDataChanged(event) {
    const index = this.messages.length - 1;
    this.gridOptions.api.ensureIndexVisible(index, 'bottom');
  }

演示： https://stackblitz.com/edit/angular-ag-grid-stuck-to-bottom

在该代码中，还有一些逻辑是关于何时根据滚动位置将 table 滚动到末尾或不滚动到末尾。

AG Grid：如何将滚动条固定在底部

AG Grid: How to stick the scrolling at bottom

ag-grid

ag-grid-angular