javascript - Automatically Scroll Message List

Question

I am making a message app with express and socket.io. The messages are appended to a list as shown below:

<div id="messageContainer">
    <ul id="messages"></ul>
</div>

socket.on('message', (content) => {
    $('#messages').append(`<li>${content.bold} ${content.std}</li>`);
    $('#messages').scrollTop = $('#messages').scrollHeight;
});

The messages are appended correctly appended however the scrolling does not occur. I get no error message and I am unsure why.

The full source code can be found on GitHub here.

Edit

I have added a console.log('scroll') to the bottom of the js call however nothing is shown.

socket.on('message', (content) => {
    $('#messages').append(`<li>${content.bold} ${content.std}</li>`);
    $('#messages').scrollTop = $('#messages').height();
    console.log('scroll')
});

This makes me think that scrolling isn't being called even thought the messages are being appended

Answer 1

jQuery objects have no property scrollHeight, change that to a function call of height.

$('#messages').scrollTop = $('#messages').height();