2

I'm trying to create a chat app basically and I want it where when a new message has been added to its container, I don't want it to be hidden. Yes, I've enabled overflow:auto but I don't want it to where the user has to manually scroll down in order to see the latest message sent;I want it where the latest message sent is automatically scrolled down. I still want the scrollbar to be enabled but I just want to disable it from jumping up and hiding the latest message.

Omikron
  • 21
  • 1
  • 1
  • Please post what code you have tried so far so that folks on stackoverflow can help you with your problem, rather than do it all for you... – allenski Oct 29 '20 at 01:38

2 Answers2

1

look at this article about how to scroll down automatically to an element using .scrollIntoView()

TheSavageTeddy
  • 204
  • 1
  • 13
0

Inside JavaScript file on page

const messages = document.querySelector(".messages-container"); // Div with class "messages-container"

After appending the received message to the messages-container div...

messages.scrollTop = messages.scrollHeight;

Some CSS...

.messages-container {
    padding: 30px;
    max-height: 500px;
    overflow-y: scroll;
}
Tony Drummond
  • 365
  • 2
  • 10
  • Is JavaScript needed or can it be done with just CSS? What if we're using React.js and we want to do this with CSS, would we need to use React? – Omikron Oct 29 '20 at 02:00
  • Not sure on the whole pure CSS thing. However, if you're using React why not simply use JavaScript? You can Google how to access the DOM with React components and probably figure your way through it. Here's one article for you: https://www.newline.co/@dmitryrogozhny/how-to-access-dom-nodes-in-react-with-refs--57d97b3d – Tony Drummond Oct 29 '20 at 02:10