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.
Try putting these two statements in setTimeout.
setTimeout(() => {
var elem = document.getElementById('chat-body');
elem!.scrollTop = elem!.scrollHeight;
}, 100)