0

I know that this is an usual problem but I cannot solve it with other responses. I'm using angular to develop a chat component and, as usual, I what the scroll to go down when the chat windows starts and when the user sends a message. I implemented the code here: Angular 2 Scroll to bottom (Chat style) but the scroll bar stays a bit above the end of the body as you can see in the next image:

imagen del chat

I am printing the variables before and after the code in Angular 2 Scroll to bottom (Chat style) to see what can be happened and with this code:

scrollToBottom(): void {
console.log("ScrollToBottom")
try {
  console.log("scrollTop "+this.myScrollContainer.nativeElement.scrollTop)
  console.log("scrollHeight "+this.myScrollContainer.nativeElement.scrollHeight)
  this.myScrollContainer.nativeElement.scrollTop = this.myScrollContainer.nativeElement.scrollHeight;
  console.log("DONE")
  console.log("scrollTopnew "+this.myScrollContainer.nativeElement.scrollTop)
  console.log("scrollHeightnew "+this.myScrollContainer.nativeElement.scrollHeight)
} catch (err) { console.log(err) }

}

I get:

scrollTop 0
scrollHeight 1539
DONE
scrollTopnew 1139
scrollHeightnew 1539

Also, I have seen that the offsetHeight of the div is 400, that is, the scrollHeight minus scrollTopnew but I don't know how to manage it.

The versions are:

  • Angular CLI: 10.1.4
  • Node: 14.8.0
  • OS: linux x64
  • Angular: 10.1.4

¿Any idea? Thanks

ADRIAN VAZQUEZ ROMERO
  • 33
  • 1
  • 8

1 Answers1

0

The scrollHeight points to the top of the component, you have to add the component height to it

Matteo Notaro
  • 31
  • 5
  • I have done it, even set it like: this.myScrollContainer.nativeElement.scrollTop = 1539 to test it. But scroolTop seems to have a maximum that I can exceed – ADRIAN VAZQUEZ ROMERO Nov 11 '20 at 08:07