自动滚动聊天高度实现仍然没有完成滚动

Question

链接这两个堆栈溢出posts:

Automatically scroll down chat div

我尝试了两种解决方案：

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

和

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

现在代码上下文中的代码：

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;
              });
            });
          }
        });

但是从这张post中的图片可以看出，滚动条还没有结束滚动。发送到最后一条消息不可见的地方。

这是代码问题吗？还是我滚动的时间不对？

Answer 1

所以它有点像 hack，至少我是这么认为的，但不管怎样。我刚刚添加了一个 setTimeout 的 500ms

检查一下

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;
                setTimeout(()=>{
                  const chatWindow = document.getElementById('chat-content');
                  chatWindow.scrollTop = chatWindow.scrollHeight;
                },500);

              });
            });
          }
        });

自动滚动聊天高度实现仍然没有完成滚动

automatically scroll chat height implementation still doesn't finish scrolling

html

javascript

css

chat

twilio