javascript - Load data on scroll up like facebook chatting system -

i developing chat system need display chat history on scroll function facebook chat system.

can me?

it'll go this...

html

<div id="chatbox">      <div class='inner'>      <?php foreach($messages $m){;?>        <div class='message'><?php echo $m;?></div>     <?php ;};?>      </div> </div> 

jquery

$(document).ready(function(){            $("#chatbox").scrolltop($("#chatbox")[0].scrollheight);  $('#chatbox').scroll(function(){     if ($('#chatbox').scrolltop() == 0){          // ajax call more messages , prepend them         // inner div         // how paginate them tricky part though         // you'll have send id of last message, retrieve 5-10 'before'           $.ajax({         url:'getmessages.php',         data: {idoflastmessage:id}, // line shows sending data.  how         datatype:'html',         success:function(data){             $('.inner').prepend(data);             $('#chatbox').scrolltop(30); // scroll alittle way down, allow user scroll more         };         });     } });  }); 

example here

// generate first batch of messages  //this sql , php first  for(var i=0;i<20;i++){      $('.inner').prepend('<div class="messages">first batch messages<br/><span class="date">'+date()+'</span> </div>');}      $("#chatbox").scrolltop($("#chatbox")[0].scrollheight);    // assign scroll function chatbox div  $('#chatbox').scroll(function(){      if ($('#chatbox').scrolltop() == 0){          // display ajax loader animation           $('#loader').show();            // youd here        // query server , paginate results        // prepend        /*  $.ajax({              url:'getmessages.php',              datatype:'html',              success:function(data){                  $('.inner').prepend(data);              };          });*/          //but example purposes......          // we'll simulate generation on server                     //simulate server delay;          settimeout(function(){          // simulate retrieving 4 messages          for(var i=0;i<4;i++){          $('.inner').prepend('<div class="messages">newly loaded messages<br/><span class="date">'+date()+'</span> </div>');              }              // hide loader on success              $('#loader').hide();              // reset scroll              $('#chatbox').scrolltop(30);          },780);       }  });

body {font-family:arial;}  #chatbox {width:300px;height:400px;border: 1px solid;overflow:scroll}  #loader {display:none;}  .messages {min-height:40px;border-bottom:1px solid #1f1f1f;}  .date {font-size:9px;color:#1f1f1f;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <div id="chatbox">  <!--loading animation-->  <img id="loader" src='http://opengraphicdesign.com/wp-content/uploads/2009/01/loader64.gif'>  <!--end loading animation-->            <div class='inner'>          <!-- load content-->      </div>  </div>

example shows quick , dirty scroll, prepend. no ajax call or anything. idea

it'll little more complex posted above though....to avoid double data, etc

and also, need send server id of last post, or pagination data of sorts, know retrieve next. how choice.

but youll query server, , retieve next 10 posts, , echo them in foreach loop, fetch html, , display it