Tuesday, 19 January 2021

Automatically Scroll Message List

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



from Automatically Scroll Message List

No comments:

Post a Comment