Infinite Scrolling or Continuous Scrolling UI Pattern

One of the innovative AJAX features I like is the Infinite Scrolling or the Continuous Scrolling UI Pattern you seen in websites like Google Reader and Wikia Search (the open source search engine!)

UIPatterns explains Continuous Scrolling in the following way:

In contrast to the Pagination patterns, the Continuous Scrolling pattern has no natural break. When using pagination patterns, a decision to only show a subset of data at a time and then let the user request more data if wanted is chosen. With the Continuous Scrolling, new data is automatically retrieved as the user has scrolled to the bottom of the page. It thus appears as if the page has no end, as more data will be loaded and inserted into the page each time the user scrolls to the bottom of page.

In my opinion, Infinite Scrolling scores over Paging especially for read-only data and it is more intuitive and accessible.

As this Classic ASP sample shows, implementing Infinite Scrolling is simplified with jQuery. In that sample, new records are fetched dynamically on scrolling to the bottom of a page. The same scrolling effect can also be replicated for a table by restricting it's height by wrapping it within a DIV tag & setting overflow:auto style for the DIV. We can invoke an asynchronous fetch by tracking the Scroll event of the DIV and it's scrollTop value. The triggering point is when the difference of the heights of the TABLE and DIV match the DIV's scrollTop value.

Also see:
Implementing Continuous Scrolling UI Pattern in ASP.NET
HOW TO implement AutoComplete with jQuery & ASP.NET