Not fully scrolls down when a new message arrives-CodePudding

I'm trying to scroll down whenever a new message arrives with the following code:

    var elem = document.getElementById('chat-body');
    elem!.scrollTop = elem!.scrollHeight;

I thought that the reason could be that it might be hiding behind the form, but the scrollbar still had some space to go further down. And if I scroll down manually, it displays the full message.

CodePudding user response：

Try putting these two statements in setTimeout.

setTimeout(() => {
  var elem = document.getElementById('chat-body');
  elem!.scrollTop = elem!.scrollHeight;
})