Overflow on page load display bottom

Question

There are 2 nested divs.

<div class="primer1"> <div class="primer2"> ... </div> </div> .primer1 { height: 100px; overflow-y:scroll; scrollbar-arrow-color:#000000; scrollbar-base-color: #228B22; }

The content of primer2 is higher in height, it shows the upper part and we can move the slider down. And it is necessary that the bottom is initially displayed and we could move up.

Following the example of chats: we should see the latest messages, and if we need to look at earlier messages, we scroll up.

How can this be implemented?

Accepted Answer · 2016-03-05T18:42:52

On pure CSS, most likely this result is not easy to achieve, and if you use JS, then two lines are enough for this:

 var scrollDiv = document.getElementById("scroll_div"); scrollDiv.scrollTo(0, scrollDiv.scrollHeight);

 .primer1 { height: 100px; overflow-y:scroll; scrollbar-arrow-color:#000000; scrollbar-base-color: #228B22; border: 1px solid black; } .primer2 { height: 300px; border: 1px solid red; }

 <div class="primer1" id="scroll_div"> <div class="primer2"> ... </div> </div>

Tested in Firefox, for other browsers may not work, in this case, you can use the jQuery library

@ Alexey, <script> ... </ script> should be the last one before </ body>.
Is the code completely taken from my answer or did you just add a piece of js to your code?
And what exactly is meant by "does not work" is displayed as before or?

Overflow on page load display bottom

1 answer 1

More articles: