如何以编程方式滚动到滚动视口的末尾？

Question

我想在添加新元素后以编程方式滚动到cdk-virtual-scroll-viewport的末尾。

我正在尝试使用该方法：

this.viewport.scrollToIndex(...);

但它似乎无法按预期工作：https://stackblitz.com/edit/angular7-virtual-scroll-oqrbjv

我在做什么错？无论如何，我并不是真的想要虚拟滚动，所以我需要cdk- 虚拟 -scroll-viewport还是有替代方法？

Answer 1

使用2个按钮尝试此操作。 一个将添加数据，另一个将滚动到末尾。

https://stackblitz.com/edit/angular7-virtual-scroll-y3u2pw

第一个按钮将如下所示：

<button type="button" (click)="addData()">Add Data</button>

添加函数将如下所示：

addData(){
   for(let i = 0; i < 10; i++) {
   this.data.push(i);
 }
}

第二个按钮将如下所示：

<button type="button" (click)="gotoLastIndex()">Go to last Index</button>

功能如下：

gotoLastIndex() {
  this.viewport.scrollToIndex(this.data.length);
}

对于itemSize，您需要将其设置为50，该高度等于class="example-item"的高度 因此您将拥有：<cdk-virtual-scroll-viewport itemSize="50" class="example-viewport">

Answer 2

您可以使用setTimeout通知Angular您的数据已更改

https://stackblitz.com/edit/angular7-virtual-scroll-135zu5?file=app/cdk-virtual-scroll-data-source-example.ts

  gotoLastIndex() {
    for (let i = 0; i < 10; i++) {
      this.data.push(i);
    }

    // execute after angular's data binding
    setTimeout(() => {
      this.viewport.scrollToIndex(99999);
    })
  }