Start viewing the div at the end of the Scroll

Asked

Viewed 304 times

0

What about you guys, blz? Guys, it seems like a dumb question to Mayor, but I searched and I couldn’t find anything related, I have a div with lists inside

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

When I load the page, it starts the display by Div’s TOP, and I wanted it to start the display by BOTTOM, ready, the facebook chat, it starts the display of messages at the end, then the person goes up the scroll to see the oldest, I want that way to see you guys... And sorry about the tag, Nn I know what this fits.

jquery css

  • Guy in this answer has some examples, even I just put there one that is done only with CSS if you are interested. If solve you can mark as duplicate if it is the case... If it is not what you need just give more details.

  • Check this link here: https://stackoverflow.com/questions/270612/scroll-to-bottom-of-div or this: https://stackoverflow.com/questions/11715646/scroll-automatically-to-the-bottom-of-the-page

  • Yours with Css was what I wanted, but the way you put it, Nn managed to fit into my code

  • Cara gave you a new option only with CSS other than the other answer. Sometimes now it suits you...

2 answers

0

I’ll put an example here using Jquery and animação, that shows the content "rolling" as if someone is actually running the mouse scroll.

The magic is on the part of jquery, and the call is :

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

The 1500 is the speed of the animation, being in 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>
<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

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

The technique consists of reversing the direction of the contents 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 may not be entirely crossbrowser, would be interesting you test in Safari, IE does not work...

Browser other questions tagged jquery css

You are not signed in. Login or sign up in order to post.