ScrollTop to follow bottom of the page

Question

I'd like my website to follow the content coming out of external source, which is loaded over time

I've tried to use

chatContainer.scrollTop = chatContainer.scrollHeight;

as my chatContainer is where the content is loaded, but it doesn't work as it should, could you give me some help with that? How to make a website follow the real-time rendered content with the view?

Answer 1

Whenever you add more content dynamically, just call the following on the container element.

const container = document.querySelector("#container");
container.scrollTop = container.scrollHeight;

Ensure you're calling this on the container that can scroll.

If you're using jQuery, it's quite simple and it can be animated.

$("#container").animate({ scrollTop: $("#container")[0].scrollHeight }, 100);

Note that when you call $("#container")[0].scrollHeight, you are specifying that you want the scrollHeight of the first match as a document element (rather than a jQuery selector). It's the equivalent of doing document.querySelector("#container"). The 100 at the end is the number of milliseconds the animation should take.

There is no need for the MutationObserver. You don't need an interval either. You just need to run one of the above functions whenever you add content to the page (like a new message). Make sure to run it after the content is added or it won't work.

Edit: If you're not sure, open your browser's element inspector. Click on the node in the list that you want to scroll and run the following code $0.scrollTop = $0.scrollHeight;. If it doesn't work, then you're selecting the wrong element OR you haven't set your container heights correctly.

Here's an example

let count = 0;

setInterval(function(){
    document.querySelector("#conversation").innerHTML += `<div class="message">Message ${count}</div>`;
    document.querySelector("#container").scrollTop = document.querySelector("#container").scrollHeight;
    count++;
}, 1000);

html, body { height: 100%; margin: 0; overflow: hidden; }

#container { width: 100%; max-height: 100%; border: 1px solid black; overflow-y:auto; }

.message { width: 100%; background-color: green; min-height: 100px; border-bottom: 1px solid black; }

<div id="container">
  <div id="conversation">
    
  </div>
</div>