How Can I Make The Scroll Bar Stay At The Bottom When New Data Is Added

Question

Hello Coders! I am coding a chat system, I would like the scroll bar to stay at the bottom. In this way when someone sends a message the user would not have to scroll down. I would also like it to start at the bottom of the page load. Additionally, the user can scroll up when needed, but when they scroll back down it locks in place. I have tried many times but for some reason it does not work, I was wondering if anyone has a method of doing this?

Answer 1

I've also have struggled with implementing this for a while. The approach I've ended up with relies on using MutationObservable

MutationObservable allows to watch for DOM changes inside element and perform some actions when deeply nested element is changed (in your case, for example, new comment was rendered):

// chatContainer is reference to your chatContainer element
var isLocked = true;

var mutationObserver = new MutationObserver(() => {
    if (isLocked) {
        scrollToBottom();
    }
});

mutationObserver.observe(chatContainer, {
    childList: true,
    subtree: true,
    attributes: false,
});

This gave me a callback, where I likely had to make chatContainer scroll to the bottom.

Scroll to the bottom implementation could be:

function scrollToBottom() {
    chatContainer.scrollTop = 99999999999;
}

To change isLocked flag, I had to listen for user scrolls on chatContainer and update it accordingly:

var LOCK_OFFSET = 25; // how many pixels close to bottom consider scroll to be locked
chatContainer.addEventListener('scroll', handleUserScroll);

function handleUserScroll() {
    var scrollFromBottom =
        chatContainer.scrollHeight -
        chatContainer.scrollTop -
        chatContainer.clientHeight; // how many pixels user scrolled up from button of the chat container.

    isLocked = scrollFromBottom > LOCK_OFFSET; // set new isLocked. lock, if user is close to the bottom, and unlock, if user is far from the bottom. 
});

Hope I've explained the general idea. This approach works fine for me. User scroll listening should be improved with events debouncing. And don't forget to dispose scroll event and mutation observer subscriptions.

Answer 2

This is what I've used in my projects. It works on IE, Edge, Firefox, Chrome and Opera. I'm not sure about Safari.

var a = document.querySelector('#divchat');
a.scrollIntoView(false);

I hope it helps.

Answer 3

There are a lot of answers for this question around.

Here is one of them from Automatically scroll down chat div

The main point of that answer is the variables scrollHeight, scrollTop, and clientHeight can be manipulated.

But basically, to scroll down it is to use container.scrollTop = container.scrollHeight;