Make a "live chat box" like behavoir and stick to bottom

0
votes

I have a hard time understanding how I would be able to do that with only HTML and CSS

Here's an animation I did to illustrate the question:

live item animation

What I am looking for is basically to do something that ressembles a live chat box, where first items start from the top and new items push old items to top while making the overflow stick to the bottom

Is it even possible with only CSS and HTML or do I have to add in JS as well ?

Thanks

javascripthtmlcss
You would definitely need to add JS as well. – Brent Harris
If I guess correctly that would be to: If the div is scrollable, on each new item scroll to bottom of div ? Then I'd need to listen to scroll events and pause it if the user is scrolling upward ? – Kheyonnant