How to put scroll at end of div?

6

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 I refresh the page the scroll is at the beginning, but I need it to scroll (start) at the end of div . How do I open it at the end of this div I created?

    
asked by anonymous 30.08.2016 / 04:17

3 answers

6

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

It would look like this in JS Pure:

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>
    
30.08.2016 / 12:59
4

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><divid="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>
    
30.08.2016 / 10:51
1

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>
    
26.07.2018 / 21:55