Angular: element.Scrolltop = element.scrollheight не работает

Question

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

До того, как я сделал это с помощью ngAfterViewChecked и метода scrollToBottom ()

@ViewChild('window') window;

ngAfterViewChecked() {
    this.scrollToBottom();
  }

scrollToBottom() {
    console.log('reached scrollToBottom');
    try {
      console.log(this.window.nativeElement.scrollTop);
      console.log(this.window.nativeElement.scrollHeight);
      this.window.nativeElement.scrollTop = this.window.nativeElement.scrollHeight;
      console.log(this.window.nativeElement.scrollTop);
    } catch (err) {}
  }

Как вы видите, я сделал три console.logs.Первый возвращает 0, второй возвращает 320, и когда я проверяю, была ли изменена полоса прокрутки на scrollHeight, он говорит, что значение scrollTop по-прежнему равно 0.

Кто-то знает, что это вызывает?

Answer 1

В некотором смысле Angular, установите свойство переполнения CSS для прокрутки для nativeElement.

Что-то вроде

.native-element {
    overflow: scroll;
}

Answer 2

Свойство Element.scrollHeight, предназначенное только для чтения, является мерой высоты содержимого элемента, включая содержимое, не видимое на экране из-за переполнения.

https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView

Вы должны попробовать это, как я однажды использовал в своем коде

const s: any = document.getElementsByClassName('someClassName')[0];
const height = s.scrollHeight + 'px';
s.style.setProperty('height', height.toString(), 'important');}, 500);

Answer 3

Использование top свойство

this.window.nativeElement.style.top = this.window.nativeElement.scrollHeight;

или

this.window.nativeElement.top = this.window.nativeElement.scrollHeight;

Answer 4

Я думаю, что вам может пригодиться эта функция scrollIntoView, которая вызывается для элемента, чтобы прокрутить его, чтобы сделать его видимым: https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView