javascript - 使用 cdk-virtual-scroll (Angular 8) 滚动到底部

Question

目标
显示消息列表并在收到新消息时滚动到底部，即使我在顶部。即使使用不同高度的元素，我也想完全滚动到底部。
问题
使用虚拟滚动，我必须设置 [itemSize]属性，但对我来说它不是静态值:

当一条消息对于一行来说太长时，它会分成多行，因此它的高度会发生变化。

我有不同类型的不同高度的消息(例如系统消息)。

另外，我正在使用 ng-content从父级插入一个按钮以加载以前的消息。我看到的是，当_scrollToBottom被调用，而不是把我带到底部，它把我带到更高的地方。我怀疑这是因为虚拟滚动中元素的高度不同。
我已经从 Angular 阅读了这个 autosize 滚动策略问题:https://github.com/angular/components/issues/10113;但我不确定这会解决我的问题。
任何关于我能做什么的想法都将受到欢迎。
测试
密码箱 : https://codesandbox.io/s/angular-virtual-scroll-biwn6

加载消息后，向上滚动。

发信息。 (加载新消息时，虚拟滚动不会滚动到底部，而是会停止更高一点)

重复

错误视频:https://gofile.io/d/8NG9HD

解决方案
给出的解决方案古拉夫·加格 作品。只需执行两次滚动功能。
我现在正在这样做:

  private _scrollToBottom() {
    setTimeout(() => {
      this.virtualScrollViewport.scrollTo({
        bottom: 0,
        behavior: 'auto',
      });
    }, 0);
    setTimeout(() => {
      this.virtualScrollViewport.scrollTo({
        bottom: 0,
        behavior: 'auto',
      });
    }, 50);
  }

我认为它不是很优雅，但效果很好。

Answer 1

如果您使用 cdk > 7，则可以使用

this.virtualScrollViewport.scrollToIndex(messages.length-1);

因为这将移动到最后一项的顶部。您需要为该项目调用 scrollIntoView 。

this.virtualScrollViewport.scrollToIndex(this.numbers.length - 1);
setTimeout(() => {
  const items = document.getElementsByClassName("list-item");
  items[items.length - 1].scrollIntoView();
}, 10);

<cdk-virtual-scroll-viewport #virtualScroll style="height: 500px" itemSize="90">
  <ng-container *cdkVirtualFor="let n of numbers">
    <li class="list-item"> {{n}} </li>
  </ng-container>
</cdk-virtual-scroll-viewport>

我已更新您的 sandbox