Scroll to the Bottom of Dynamic Div

Question

I have a div with id "page-content", it does not have height or width , it just have a blank div .

I'm filling that div with content dynamically, so the div height is growing constantly, I'm making a chat, and i want to detect if I am at the bottom of the div or in the last 10% of the div total height, If true, scroll to the bottom

var box = $('#page-content');
if (box.scrollTop() > (box.height*0.90))
    box.scrollTop(25000); // This is the top bottom

What I'm trying to do is, check if you are in the last 10% or less top bottom height of "#page-content" div (not when I'm reading "old messages" at the beginning of the Div), I have a function that appends new messages but I need to scroll down manually to see new messages...so i want to automatically scroll to the New bottom so i can see the new message :)

UPDATE:

function getChat() {
  $.ajax({
    type: "GET",
    url: "refresh.php?lastTimeID=" + lastTimeID
  }).done( function( data )
  {
    var jsonData = JSON.parse(data);
    var jsonLength = jsonData.results.length;
    var html = "";
    for (var i = 0; i < jsonLength; i++) {
      var result = jsonData.results[i];
      html += '<span class="color-'+result.color+'"><b>'+result.usrname+'</b></span> <i class="fa fa-angle-right"></i> '+result.chattext+'<br>';

      lastTimeID = result.id;     
    }
    $('#page-content').append(html);

    if(html!="")
    {   
     // Here i need to check if the scroll position is in the bottom or in the last 10%
     //then this to scroll to the top bottom (25000 is height limit)
     $('.page-content').scrollTop(25000);
    }

  }); }

Answer 1

there is a trick in scrolling the page to bottom of DIV , i tried implementing it in this fiddle .

See $(window).height()+$(window).scrollTop() will always be equal to the total height(including paddings,margins) of children of the window, in our case it is equal to the $('#page-content').height()+margin/padding .

CSS:

div#page-content {
  height:600px;
  border:solid 1px red;
}

in our situation:

$(window).height()+$(window).scrollTop()=$('#page-content').height()+(margin/padding)=600px

so whenever we scroll it, we can attach an scroll() event to the div and easily check whether we are in in the last 10% or less top bottom height of "#page-content"

$(window).on('scroll',function(){

   if($(window).height()+$(window).scrollTop()>=($('#page-content').height()*(.9))){
     $(window).scrollTop($('#page-content').height()-$(window).height())
   }
})

Good luck.

Answer 2

Since I did not make this, I don't want to take credit for it.

There is a jQuery plugin that makes anything that has a scroll bar scroll to a specific location or to an element. Since you want to scroll to a dynamic div, you can call this after you created the div and it will scroll to that location.

You can find the plugin over here.

You can find a demo of the plugin in action over here.

Hope this was what you are looking for.

-W

Answer 3

The trick is that inside the container for your messages (in your case the #page-content DIV), you can have an invisible placeholder div with some id set on to it.

In this demo JSFiddle , as you click on the anchor .addItem , after the new item is added to the container, the placeholder div is moved to the end of the container . This ensures at the same time that clicking on the .addItem brings the bottom of the container DIV into view ( as it refers the id of the placeholder in its href attribute ).

function scrollToBottom(container) {
    // get all the child elements of the container
    var children = container.children('.item');

    // move the placeholder to the end of the container
    $('#contentBottom').insertAfter(children.eq(children.length - 1));
}

Update

In order to determine your current scroll position, you should listen to scroll events in the container . Meanwhile, you should take into account the updated height value of the container when new messages arrive.

Check out this updated fiddle in which I'm checking if the current scroll position is beyond 60 % from the top to easily see the effect.

Note: If a new message comes when you are not scrolling, you can simply do $('.container').scrollTop(25000) in the same function/block of code that appends it to the container .