Loading content as the user scrolls down.

Question

I am building a blog type page, and I want to load items into the page as the user scrolls down, much like Google Reader, or Soup.io. How would you go about achieving this effect? I've seen some examples which read the height of the page, and have an onScroll even attached to the window so that as the user scrolls down we can test to see if they've scrolled down far enough to warrant loading more items. Soup.io's implementation seems to remove the old items as you scroll down so that the browser isn't dealing with an ever-increasingly large DOM tree. Which javascript libraries would be best suited to this task?

Answer 1

Any popular library (Prototype, jQuery) can help you do this. They assist in grabbing the data via AJAX as well as helping you automate the DOM interaction.

Answer 2

Unspace had an article demonstrating this functionality: Endless Pageless: No More Next Page. Their demonstration page is here.

This particular example uses RoR and Prototype.

Answer 3

Thy this jquery example http://webdeveloperplus.com/jquery/create-a-dynamic-scrolling-content-box-using-ajax/