Scroll Bottom Of Chat

ewgiddings commented 5 years ago

Yea this is what I ended up using. I was wondering if this was the way you all recommend since there's nothing in the docs about it.

The biggest problem with this is that pushing a message to the message array and then calling this it only scrolls to the bottom of the message before the newest one. I have to set a timeout on that call of 1 millisecond to actually scroll to the bottom.

this.chatMessages.push({ userName: this.user.userName, userId: this.user.id.toString(), message: this.newMessage }); setTimeout(() => { const messageArea = document.getElementsByClassName('my-custom-scrollbar')[0] as HTMLElement; messageArea.scrollTop = messageArea.scrollHeight - messageArea.clientHeight; }, 1);

If I don't use that setTimeout then the method you described only scrolls to the previously sent message not the newest.

Konrad Stępień staff commented 5 years ago

There are probably other ways to achieve a similar effect, it all depends on how the project is created.

Have you tried maybe to use asynchronous data?

ewgiddings commented 5 years ago

The project is simply pushing a message model into the array of messages using array.push(messageModel). Do you suggest I turn that array push into some sort of promise or async function? Is that what you mean by using async data?

Konrad Stępień staff commented 5 years ago

Do you suggest I turn that array push into some sort of promise or async function?

Yes, but I didn't saw your push function.

I did your example with this function and I didn't find any other solution besides:

import { Component, ViewChild, AfterViewInit } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent implements AfterViewInit {
  @ViewChild('scroll', { static: true }) scroll: any;

  messages: string[] = [];

  addMess = (text: string) => {
    this.messages.push(text);
    setTimeout(() => {
      this.scroll.nativeElement.scrollTo(0, this.scroll.nativeElement.scrollHeight);
    }, 0);
  };

  ngAfterViewInit() {
    this.scroll.nativeElement.scrollTo(0, this.scroll.nativeElement.scrollHeight);
  }
}

I'm afraid that setTimeout must be used