How to put scroll at the end of the div?

Question

I have the following div

<div style="height:300px;overflow-y:auto;">
...
</div>

Inside it will have several texts and will make the scroll appear. When you refresh the page the scroll is at the beginning, only I need it to scroll (start) at the end of div. How should I make it open at the end of this div that I created ?

Answer 1

Add to Scrolltop the value of the property scrollHeight, scrollHeight returns the height.

It would look like this in JS Puro:

var objDiv = document.getElementById("scroll");
objDiv.scrollTop = objDiv.scrollHeight;

#scroll {
    height:150px;
    overflow:scroll;
}

<div id='scroll'>
Praticamente em cima da terra, contém poucos túneis de 2 metros. Não há estações subterrâneas. Os projetistas tiveram a boa vontade de fazer uma estação abaixo do nível da terra, porém não deu certo, vide Estação Waldomiro Lobo abaixo. O metrô é tão grande como um fio de cabelo de um careca. O projeto que os políticos prometem, mas pegam o seu dinheiro e vão para Rio Branco. A extensão dos trens são de aproximadamente 25 cm 40 metros. Dentre os materiais usados na linha, destacam-se o plástico, durepox, energia roubada da CEMIG e ferro fudido. Atualmente a linha roda com um trem acoplado a outro trem virando um trem de oito vagões, ocupando por inteiro o espaço das plataformas nas estações, uma vez que os trens que circulam atualmente são metade do tamanho da plataforma. Porém este trem acoplado circula uma vez por dia e os presidentes da CBTU acreditam que por causa disso o problema da super-lotação foi resolvido. Para esse magnífico acoplamento foi necessário roubar mais energia da CEMIG.
</div>

Answer 2

You can do this with jquery:

$('#scroll-div').animate({
  scrollTop: $(this).height() // aqui introduz o numero de px que quer no scroll, neste caso é a altura da propria div, o que faz com que venha para o fim
}, 100);

div {
 height: 100px;
 overflow-y: auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="scroll-div">
  <p>O Lorem Ipsum é um texto modelo da indústria tipográfica e de impressão. O Lorem Ipsum tem vindo a ser o texto padrão usado por estas indústrias desde o ano de 1500, quando uma misturou os caracteres de um texto para criar um espécime de livro. Este texto não só sobreviveu 5 séculos, mas também o salto para a tipografia electrónica, mantendo-se essencialmente inalterada. Foi popularizada nos anos 60 com a disponibilização das folhas de Letraset, que continham passagens com Lorem Ipsum, e mais recentemente com os programas de publicação como o Aldus PageMaker que incluem versões do Lorem Ipsum.</p>
<div>

Answer 3

If you want to do only with CSS you can use these techniques.

Option 1:

The technique with flexbox is to reverse the direction of the content of the div using flex-direction: column-reverse then the content always starts down and gets 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 does not work in IE...

---

Option 2:

This is a rotated div to stay upside down, then use direction:rtl to return the bar of scroll right and text-align:left to adjust the text. Then the content of the messages is rotated upside down.

The newest message always ends 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>