Load content as an element scrolls into view

Question

Hey everyone,

I have a list of search results in a <div> element with a static height and overflow: auto; in the style. I would like to load only the first x number of search results (e.g. 20), and load another x results as the user scrolls to the bottom of the element containing the search results.

Can anyone explain to me how I would do this? I found a few examples, but all of those use the scroll value of the entire document, not a single <div>. I am using jQuery, if it matters.

Answer 1

If you compare the div's .top() + .height() to the window's .scrollTop + .height then you could tell when you're at the bottom of that div, and then trigger the next content load...

Answer 2

Sounds to me like you'd like to detect the scroll bars position when it is near the end. Found this when googling around on the jquery group. Its proposed solution with a little added documentation if needed:

$.fn.isNearTheEnd = function() {
  // remember inside of $.fn.whatever = function() {}
  //   this is the jQuery object the function is called on.
  //   this[0] is DOMElement
    return this[0].scrollTop + this.height() >= this[0].scrollHeight;
};

// an example.
$("#content").bind("scroll", function() {
  if ($(this).isNearTheEnd()) // load some content
});

Answer 3

thanks gnarf. that works great.