0

E ae pessoal, blz? Pessoal, parece até uma dúvida besta a priore, mas procurei e não encontrei algo relacionado, tenho uma div com listas dentro

etc...
li.intem3
li.intem2
li.intem1

Quando eu carrego a página, ele inicia a exibição pelo TOP da Div, e eu queria que ele iniciasse a exibição pelo BOTTOM, pronto, o chat do facebook, ele inicia a exibição das mensagens pelo final, aí a pessoa vai subindo o scroll pra ver as mais antigas, quero dessa forma vllw pessoal... E perdão pelas Tag's, Nn sei em qual isso se encaixa.

4
  • Cara nessa resposta tem alguns exemplos, inclusive acabei de colocar lá um que é feito apenas com CSS caso te interesse. Se resolver vc pode marcar como duplicada se for o caso... Se não for o que vc precisa é só dar mais detalhes.
    – hugocsl
    26/07/2018 às 19:57
  • O seu com Css era oq eu queria, mas da forma que colocou, Nn consegui encaixar em meu código 26/07/2018 às 21:21
  • Cara te dei uma nova opção apenas com CSS diferente da da outra resposta. As vezes agora te atende...
    – hugocsl
    27/07/2018 às 12:32

2 Respostas 2

0

Vou colocar aqui um exemplo usando Jquery e animação, que mostra o conteúdo "rolando" como se alguém estivesse mesmo rodando o scroll do mouse.

A mágica fica por parte do jquery, e a chamada é :

$('#divQueQueroScrollar').stop().animate({
  scrollTop: $('#divQueQueroScrollar')[0].scrollHeight
}, 1500);

O 1500 é a velocidade da animação, sendo em milissegundos, ou seja, um segundo e meio.

Segue o snippet executável para ver como fica:

$('#divQueQueroScrollar').stop().animate({
  scrollTop: $('#divQueQueroScrollar')[0].scrollHeight
}, 1500);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="divQueQueroScrollar" style="border: solid 1px #000; width: 100px; text-align: center; overflow: scroll; height: 100px;  ">
1<br/>2<br/>3<br/>4<br/>5<br/>6<br/>7<br/>8<br/>9<br/>10<br/>11<br/>12<br/>13<br/>14<br/>15<br/>16<br/>17<br/>18<br/>19<br/>20<br/>21<br/>22<br/>23<br/>24<br/>25<br/>26<br/>27<br/>28<br/>29<br/>30<br/>
</div>

0

Como vc falou que as outras resposta não te atenderam vou te dar uma outra opção apenas com CSS usando flexbox.

A técnica consiste em inverter a direção do conteúdo da div usando flex-direction: column-reverse então o conteúdo sempre começa embaixo e vai sendo empurrado pra cima.

Veja o exemplo para entender melhor:

.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: Essa solução pode não ser totalmente crossbrowser, seria interessante vc testar no Safari, no IE não funciona...

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .