How to create an infinite scroll using jQuery?

Question

$( "body").scroll( function() {
   $( "#myDiv").load( "test.html");
});

Using this syntax, we can load content into divwhen the user scrolls. But before embedding in a div, I want to make sure that the div is in the viewport area when the user scrolls down.

If so, then I would like to load the external content into div. Please help me achieve my goal.

Answer 1

  $( "body").scroll( function() { 
    if (document.elementFromPoint(x,y) == $("#whatever")) { 
      $( "#myDiv").load( "test.html");
    }
  }

Answer 2

Let's say you have a bottom div with id #footer:

function element_in_scroll(elem) {
var docViewTop = $(window).scrollTop(); var docViewBottom = docViewTop + $(window).height();

var elemTop = $(elem).offset().top;
var elemBottom = elemTop + $(elem).height();

return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}

$(document).scroll(function(e){
if (element_in_scroll("#footer")) {
    //Here you must do what you need to achieve the infinite scroll effect...
};
});

Also, if you want more information about this, how to create endless scrolling in the jquery manual http://dumpk.com/2013/06/02/how-to-create-infinite-scroll-with-ajax-on-jquery/