Question

I’m using jQuery, and I already have a table set up with a specific height, with overflow:scroll. I’m wondering what I should access in order to know when to load more data from the server (I don’t need help with the ajax calls or loading the actual data). Rather, I’m trying to understand how to know my scroll position or to know when I’m near reaching the bottom of the data (so I can load more ahead of time).

So, How do I know when to load more data based upon scroll position?

Answer 1

Here is a solution, using the non-standard (but widely supported) scrollHeight property:

$("table").on("scroll", function(event) {
  var $elem = $(event.target);
  if(event.target.scrollHeight - $elem.scrollTop() === $elem.outerHeight()) {
    // Scrolled to bottom, load more data
  }
});

You might want to load more data before the user reaches the bottom, if so, you should use some threshold:

$("table").on("scroll", function(event) {
  var $elem = $(event.target)
    , threshold = 100;
  if(event.target.scrollHeight - $elem.scrollTop() + threshold >= $elem.outerHeight()) {
    // Scrolled to bottom, load more data
  }
});

If you don’t want to use scrollHeight, you have to have an inner element the height of which you can use to calculate. Perhaps wrapping the table with a div, and setting overflow: scroll on the div instead. See how to tell if you’re scroll to bottom for details.