Scroll position always at bottom

I'm working on one chat application where chat window is placed in one Container that has fixed height and the CSS as below:   .middlechatContainer { height: 540px; overflow-y: scroll; }   There is a scroller coming for this container and I want to show the scroller always placed at the bottom of the container. How can I achieve this? I tried JavaScript and JQuery but couldn't get success.    Thanks In Advance!
2 answers

I haven't tried this, but something like this should work:


// Assuming you have a chat container with the ID "chatContainer"
const chatContainer = document.getElementById("chatContainer");

// Function to scroll to the bottom of the chat container
function scrollToBottom() {
  chatContainer.scrollTop = chatContainer.scrollHeight;

Decide when you want to use this, because as a user it's super annoying if you're trying to scroll up and it keeps auto-scrolling down. You could for instance only call this when a new message appears.


Hi Shubham,

Use the below javascript code to scroll to top automatically