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

Comments

  1. Old Versions softwares

    http://old-versions.org/

    Old Versions Softwares- Old-Versions.org is an archive of old versions of various programs.

    ReplyDelete
  2. Hi! Thank you for the article.

    Unfortunately, the code samples on the other websites referred to have since been removed.

    Might you have a way to post the code again for us?

    I am referring to the code in the linked text in the following from your article:

    "As this Classic ASP sample shows, implementing Infinite Scrolling is simplified with jQuery."

    Thank you!

    ReplyDelete
  3. Here's the archived version of the Classic ASP article - https://web.archive.org/web/20080606021219/http://www.webresourcesdepot.com/load-content-while-scrolling-with-jquery/

    and the ASP.NET version, Implementing Continuous Scrolling UI Pattern in ASP.NET - https://web.archive.org/web/20111103095500/http://www.eggheadcafe.com/tutorials/asp-net/b8381915-06d9-4538-b4bb-5ac2a8e73f34/implementing-continuous-scrolling-ui-pattern-in-aspnet.aspx

    ReplyDelete

Post a Comment

Popular posts from this blog

Maven Crash Course - Learn Power Query, Power Pivot & DAX in 15 Minutes

"Data Prep & Exploratory Data Analysis" course by Maven Analytics

Oracle Cloud Infrastructure 2024 Generative AI Professional Course & Certification Exam (1Z0-1127-24)