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.

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.

• javascript
• jquery
• ajax
• dynamic-loading

2 Answers 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
});

If you pare 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...