Scroll is always at the base of a div

Asked

Viewed 51 times

2

I’m automatically bringing information from a database, which creates a scroll in a div. The problem is that I have to scroll down to follow the information that appears on the screen. How would I make the scroll automatically descend with the information, regardless of how much the database brings? I tested this code, but it didn’t work:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script>
    $("#resultados").scrollTop($("#resultados")[0].scrollHeight);
</script>

<div id="resultados" style="overflow: scroll">

Aqui aparece os resultados

</div>
javascript jquery css
  • 1

    I don’t understand, you could recreate an example of this in Jsfiddle and explain a little better what you’re trying to do?

  • You are adding more than one element with the same ID #resultados? view HTML and/or jsFiddle would be good...

1 answer

1


You have to define a height fixed for your div.

$("#resultados").scrollTop($("#resultados")[0].scrollHeight);
#resultados {
  height: 300px;
  width: 400px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="resultados" style="overflow: scroll">

  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis doloremque dolorum expedita accusamus error asperiores harum ipsam culpa odit blanditiis rerum aperiam et praesentium ea autem, esse veniam nulla deleniti!

  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic molestiae ratione iusto laudantium illum velit sit reprehenderit sed officiis consequuntur alias fugit optio aspernatur voluptatum dolores earum, aut. Eum, reiciendis?
  </p>

  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore consectetur reprehenderit et incidunt laudantium fugiat sed commodi reiciendis rerum beatae sit repudiandae ipsum rem facere neque, autem? Reiciendis, modi eveniet!</p>

  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae, asperiores dolores illo, error nihil incidunt hic vero, pariatur tempora tempore corporis! Repellat doloremque et cum neque blanditiis nam, quaerat alias!
  </p>
</div>

Browser other questions tagged javascript jquery css

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