CSS solution - always scroll overflow doc to bottom

Question

I have a div that has overflow: scroll, and I want it to always scroll to bottom along Y-axis no matter what content it has. (think about a chat thread, which always displays the latest message at the bottom.)

I saw there are some jQuery solutions that scrolls the div to its height when new messages get added, but I am wondering if there's any pure CSS solution to this?

Thank you!

Gustavo Rana · Accepted Answer · 2017-12-05 16:41:26Z

1

Unfortunately, not possible with pure CSS but you can use pure js to get the total scrollable height of element with elem.scrollHeight and scroll the element to that position with elem.scrollTop

you can see in this example

the js code is:

var elem = document.querySelector("theElementClass");
var elemHeight = elem.scrollHeight;
elem.scrollTop = elemHeight;

hope this helps. =D

edited Dec 5, 2017 at 16:41

answered Dec 5, 2017 at 16:29

Gustavo Rana

714 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

CSS solution - always scroll overflow doc to bottom

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related