How to create an Infinite Scroll using jQuery?

Question

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

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

If yes then I would like to load external content into that div. Please help me to achieve my goal.

If you know how heigh the content is you could monitor the amount of pixels scrolled. Although it's probably a bit of an inelagant idea. — David Yell, Jan 25 '11 at 12:45
Doing significant work in scroll event handler is a bad idea! How bad? Enough to bring twitter to its knees :) Check out this blog post by John Resig - http://ejohn.org/blog/learning-from-twitter/ — Tsvetomir Tsonev, Jan 25 '11 at 12:48
Have a look at the [viewport plugin](http://www.appelsiini.net/projects/viewport). — lonesomeday, Jan 25 '11 at 12:50
http://stackoverflow.com/questions/704758/how-to-check-if-an-element-is-really-visible-with-javascript — Incognito, Jan 25 '11 at 14:35

score 2 · Accepted Answer · answered Jan 25 '11 at 14:37

2

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

answered Jan 25 '11 at 14:37

Incognito

20,537
15
80
120

can u please explain what it does if (document.elementFromPoint(x,y) == $("#whatever")) { $( "#myDiv").load( "test.html"); } how document.elementFromPoint(x,y) will work? – Thomas Jan 27 '11 at 07:15
It returns the element that is under those co-ordinates, relative to the upper-left corner of your browser window/iframe. https://developer.mozilla.org/en/DOM/document.elementFromPoint You can find the position of a DIV by using things such as https://developer.mozilla.org/en/DOM/element.offsetTop – Incognito Jan 27 '11 at 13:59

How to create an Infinite Scroll using jQuery?

1 Answers1