Angular: element.Scrolltop = element.scrollheight isn't working

So I tried making a chatbox window component that displays all the messages. After I load and display the messages I want to scroll down in the window so the user can see the latest messages.

Before I did this with ngAfterViewChecked and the method 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) {}
}


As you can see I did three console.logs. The first one returns 0, the second one return 320 and when I check whether the scrolltop has been changed to the scrollHeight it says that the scrollTop still is 0.

Does someone know what's causing this?



Continue reading...