Start displaying the div at the end of the Scroll [duplicate]

Question

Start displaying the div at the end of the Scroll [duplicate]

Navigation

#1 by (2 votes)
#2 by (0 votes)

2

And, folks, blz? I have a div with lists in it.

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

When I load the page, it starts the TOP view of the Div, and I wanted it to start the BOTTOM display, ready, the facebook chat, it starts to display the messages at the end, then the person goes up the scroll to see the oldest ones, I want that way vllw personal ... And pardon for Tag's, I do not know what that fits.

jquery css

asked by anonymous 26.07.2018 / 21:45

2 answers

What is the difference between Integrated Security and Persist Security? Data structure in c ++

score 2 · Answer 1

I'll put an example here using Jquery and animação , which shows the content "rolling" as if someone were actually scrolling the mouse.

The magic comes from jquery, and the call is:

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

The 1500 is the speed of the animation, being milissegundos , that is, a second and a half.

Follow the executable snippet to see how it looks:

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divid="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>

score 0 · Answer 2

As you said the other answers did not answer you I will give you another option only with CSS using flexbox.

The technique is to invert the direction of the div content using flex-direction: column-reverse so the content always starts underneath and is 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>