Scroll position always at bottom

0
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!
asked
2 answers
0

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.

answered
0

Hi Shubham,

Use the below javascript code to scroll to top automatically

window.scrollTo(0,0);
answered