Load content as an element scrolls into view

Question

I have a list of search results in a

element with a static height and overflow: auto; in the style. I would like to load only the first

相关标签:

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