0

I'm having trouble keeping my scroll bar at the bottom of the of my div

this is my div structure

<div class="scrolling" style="height: 500px; overflow-y: scroll;">
      <div>This div contains my dynamic data from database which can be over 500px in height</div>
</div>

this is what i've done so far

$(document).ready(function(){
   setInterval(function() {
     $(".scrolling").animate({ scrollTop: $(document).height() }, "fast");
   }, 1500);
});

its working as desired as long as the total height of the data is lower or equal to 500px but if my dynamic data's height is more than 500px my scroll bar stops at exactly 500px of height even if that is not the bottom of the scroll

Sheena Salazar
  • 33
  • 5

1 Answers1

0

Try this:-

$(document).ready(function(){
   setTimeout(function() {
     $(".scrolling").animate({ 
         scrollTop: $('.scrolling').prop("scrollHeight")
     }, "fast");
   }, 1500);
});

Fiddle

Sujata Chanda
  • 3,355
  • 2
  • 21
  • 35