If you want to do only with CSS you can use these techniques.
Option 1:
The technique with flexbox
consists of inverting the direction of the contents of div
using flex-direction: column-reverse
so the content always starts underneath and is being pushed up.
See the example to better understand:
.container {
height: 100px;
overflow: auto;
display: flex;
flex-direction: column-reverse;
border: 1px solid;
}
<div class="container">
<div> /* essa div na verdade começa de baixo pra cima */
<div class="inner">Primeira mensagem</div>
<div class="inner">oi</div>
<div class="inner">oi</div>
<div class="inner">oi</div>
<div class="inner">oi</div>
<div class="inner">oi</div>
<div class="inner">oi</div>
<div class="inner">oi</div>
<div class="inner">oi</div>
<div class="inner">oi</div>
<div class="inner">oi</div>
<div class="inner">Última menssagem</div>
</div>
</div>
OBS: This solution may not be totally crossbrowser, it would be interesting to test in Safari, IE does not work ...
Option 2:
This is a div rotated to be upside down, then use direction:rtl
to return the scroll
bar to the right and text-align:left
to adjust the text. Then the content of the messages is rotated to the opposite to stay upside down.
The newest message always stays at the bottom of the scroll.
.scrollable {
transform-origin: 50% 50%;
transform: rotate(180deg);
border: 1px solid;
width: 120px;
height: 120px;
overflow-y: auto;
direction: rtl;
text-align: left;
}
.message {
padding: 0.5em;
}
.messages_wrap {
float: left;
width: 100%;
transform: rotate(180deg);
}
<div class="scrollable">
<div class="messages_wrap">
<div class="message">Your message1</div>
<div class="message">Your message2</div>
<div class="message">Your message3</div>
<div class="message">Your message4</div>
<div class="message">Your message5</div>
<div class="message">Your message6</div>
<div class="message">Your message7</div>
<div class="message">Your message8</div>
<div class="message">Your message9</div>
</div>
</div>