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
– David Yell, Commented Jan 25, 2011 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 - ejohn.org/blog/learning-from-twitter — Tsvetomir Tsonev
– Tsvetomir Tsonev, Commented Jan 25, 2011 at 12:48

Incognito · Accepted Answer · 2011-01-25 14:37:15Z

2

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

answered Jan 25, 2011 at 14:37

Incognito

20.8k15 gold badges82 silver badges121 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Thomas Over a year ago

can u please explain what it does if (document.elementFromPoint(x,y) == $("#whatever")) { $( "#myDiv").load( "test.html"); } how document.elementFromPoint(x,y) will work?

Incognito Over a year ago

It returns the element that is under those co-ordinates, relative to the upper-left corner of your browser window/iframe. developer.mozilla.org/en/DOM/document.elementFromPoint You can find the position of a DIV by using things such as developer.mozilla.org/en/DOM/element.offsetTop

Collectives™ on Stack Overflow

How to create an Infinite Scroll using jQuery?

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related