How to get data based on scrolling div - jQuery?

Question

I work on a search page where I can potentially get thousands of records (I get only the customer’s name) based on the search criteria. I am loading data into a result div (height: 300 pixels, overflow: scroll). Is it possible to get a part of the data (paging type) first and bring the next part when the user scrolls the div? I do not want to implement paging again, since I already have paging implemented for the grid on the previous page. And please let me know your views, if necessary.

Any idea would be very helpful.

Answer 1

Here's a possible way to do this based on the example shown here to find out if you are scrolling down. It checks every second to see if it sends a POST request for a new "page". You can add things like setting the interval on the mouseenter and clearing it on the mouseleave so that it doesn't check every second on your page, but this should give you the 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); });