How To "Endless Document" Script (like Skittles.com)

Question

How did they accomplish this? Have you guys seen: http://www.skittles.com? The site never ends!

Answer 1

Have a look at:

http://ajaxian.com/archives/implementing-infinite-scrolling-with-jquery

Answer 2

Check this out: http://desandro.com/demo/masonry/docs/infinite-scroll.html

Answer 3

Well, here's one way of doing it:

$(document).ready(
    function(){
     $(window).scroll(
         function(){
             if ($(window).scrollTop() + $(window).height() >= $(document).height()) {
                 $('div').clone().appendTo('body');
             } 
         }
        ); 
    }
    );

With the requisite JS Fiddle demo.

Bear in mind that any interactive content that's cloned/appended/inserted dynamically will require some kind live() or delegate() for jQuery to interact with them.

That said, there are caveats:

1. Infinite scrolling isn't necessarily a pleasant navigation aid, particularly if the user is likely to want to view some of the content half way down an infinite page.
2. There comes a point at which a browser will crash or become sluggish/unresponsive due to the sheer volume of content it's required to maintain in memory.