Цель

Отображение списка сообщений и прокрутка вниз при получении нового сообщения, даже если я нахожусь наверху. Я бы хотел полностью прокрутить низ даже с элементами разной высоты.

Проблема

С помощью виртуальной прокрутки я должен установить свойство [itemSize], но для меня это не статическое значение:

• Когда сообщение слишком длинное для одной строки, оно разбивается на несколько, поэтому его высота изменяется.
• У меня есть разные типы сообщений с разной высотой (например, системные сообщения).

Кроме того, я использую ng-content, чтобы вставить кнопку родительского элемента для загрузки предыдущих сообщений. Я вижу, что когда вызывается _scrollToBottom, вместо того, чтобы увести меня вниз, он уносит меня немного выше. Я подозреваю, что это из-за разной высоты элементов внутри virtual-scroll.

Я прочитал эту проблему стратегии автоматического изменения размера прокрутки из Angular: https://github.com/angular/components/issues/10113;, но я не уверен, что это решит мою проблему.

Любая идея о том, что я могу сделать, будет приветствоваться.

Тестовое задание

Codesandbox: 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);
  }

Я считаю, что это не очень элегантно, но работает нормально.