automatically scroll chat height implementation still doesn’t finish scrolling


linking these two stack overflow posts:

Chat box, auto scroll to bottom
Automatically scroll down chat div

I have tried a solution from both:

const chatWindow = document.getElementById('chat-content');
chatWindow.scrollTop = chatWindow.scrollHeight;

and

const chatWindow = document.getElementById('chat-content');
const xH = chatWindow.scrollHeight;
chatWindow.scrollTo(0, xH);

and now the code within the context of the code:

this.twilioconversationservice.receiveworkingconversation()
      .subscribe(
        (req : any)=>{
          if(req != null){
            this.thisconversation = req;
            this.thisconversation.on('messageAdded', ()=>{
              this.thisconversation.getMessages().then((res: any)=>{
                this.messages = res.items;
                const chatWindow = document.getElementById('chat-content');
                chatWindow.scrollTop = chatWindow.scrollHeight;
              });
            });
          }
        });

see from this picture the scroll bar has not fully reached the bottom

But as you can see from the picture included in this post, the scroll bar has not finished its scroll. To where the last message that was sent is not in view.

Is this a code issue? Or am I scrolling at the wrong time?

Source: JavaSript – Stack Overflow

September 3, 2021
Category : News
Tags: chat | css | html | javascript | twilio

Leave a Reply

Your email address will not be published. Required fields are marked *

Sitemap | Terms | Privacy | Cookies | Advertising

Senior Software Developer

Creator of @LzoMedia I am a backend software developer based in London who likes beautiful code and has an adherence to standards & love's open-source.