How to fetch data based on scrolling of div - JQuery?

Question

I am working on a search page wherein I could potentially get thousands of records (I fetch Client Name only) based on search criteria. I load the data into a results div (height:300px; overflow:scroll). Is it possible to fetch a part of data first (kind of paging) and bring the next part when the user scrolls the div? I don't want to implement paging again since I already have paging implemented for a grid in the previous page. And please let me know your views if this is required too.

Any idea would be of great help.

Answer 1

Here's a possible way of doing it based off an example shown here for how to check if you're scrolled to the bottom. It checks every second to see whether to send a POST request for the new "page". You could add things like setting the interval on mouseenter and clearing it on mouseleave so it's not checking every second someone is on your page, but this should give you a basic idea.

JS:

var checkBottom, page = 1;

function ifBottom(){
   var cont = $('#container');

   if(cont.scrollHeight - cont.scrollTop() == cont.outerHeight()){
      page = page++;
      $.post('example.php', {pg: page}, function(html){
         cont.append(html);
      }, 'html');
   }
});

$(document).ready(function(){
   checkBottom = setInterval(ifBottom(), 1000);
});