Continuous Scrolling Design pattern

Problem summary

The user needs to view a subset of data that is not easily displayed on a single page




  • Use when there are more data to show than what would fit on a normal page
  • Use when navigating to a second page of data takes away too much attention from the content


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.


The problem with using pagination for browsing between subsets of data is that the user is pulled from the world of content to the world of navigation, as the user is required to click to the next page. The user is then no longer thinking about what they are reading, but about how to get more to read. This breaks the user’s train of thought and forces them to stop reading. Using pagination creates a natural pause that lets the user reevaluate if he or she wants to keep going on or leave the site, which they a lot of the time do.

It can be argued that Continuous Scrolling can be frustrating for the user, as there is no natural pause. The user will ask himself: When am I done reading?

More example images of the 'Continuous Scrolling' pattern

  • spacer

    When you scroll to the bottom of the page at, a load indicator tells you how much time you'll wait until the next news items have finished loading.

  • spacer

    The updates feed in the account home at features a soft version of the continuous scrolling - or pagination - where the next results aren't loaded automatically, but on clicking the "Older posts" link. Instead of linking to a new pagination page, the next items are pasted in the bottom of the page.


Post a comment

← You need to write your name or initials! Required. Real name or initials only.
← That doesn't look like a valid email! ← Oops, you forgot to enter your email! Required. Will not be published.
Oops, you forgot to write your comment!
via Ad Packs

Browsing Design patterns

« Tip A Friend | Pagination »
Vote down Vote up
Out of 104 votes, 79.81% like this one.
  • Getting input
    • Forms
      • Forgiving Format
      • Structured Format
      • Fill In The Blanks
      • Input Prompt
      • Good Defaults
      • Captcha
      • Inplace Editor
      • WYSIWYG
      • Live Preview
      • Password Strength Meter
      • Input Feedback
      • Calendar Picker
    • Explaining the process
      • Steps Left
      • Blank Slate
      • Inline Help Box
      • Wizard
      • Tour
    • Community driven
      • Wiki
      • Lazy Registration
      • Vote To Promote
      • Account Registration
      • Rate Content
  • Navigation
    • Tabs
      • Module Tabs
      • Navigation Tabs
    • Jumping in hierarchy
      • Breadcrumbs
      • Shortcut Dropdown
      • Home Link
      • Fat Footer
    • Menus
      • Vertical Dropdown Menu
      • Horizontal Dropdown Menu
      • Accordion Menu
    • Content
      • Thumbnail
      • Carousel
      • Continuous Scrolling
      • Pagination
      • Archive
      • Tag
      • Tag Cloud
      • Article list
      • Event calendar
  • Dealing with data
    • Search
      • Table Filter
      • Live Filter
      • Autocomplete
    • Tables
      • Sort By Column
      • Alternating Row Colors
    • Images
      • Image Zoom
      • Gallery
      • Slideshow
    • Formatting data
      • Copy Box
  • Social
    • Activity stream
    • Ego
      • Completeness meter
      • Collectible Achievements
  • Miscellaneous
    • Adaptable View
    • Shopping
      • Shopping Cart
      • Coupon
      • Pricing table
      • Product page
    • Increasing frequency
      • Tip A Friend

Example images

  • spacer
  • spacer

Is also called...

  • Infinite scrolling
  • Endless page

See it in action

  • Humanized reader

Related articles

  • Thumbnail
  • Carousel
  • Pagination
  • Archive
  • Tag
  • Tag Cloud
  • Article list
  • Event calendar is neither affiliated with the authors of this page nor responsible for its contents. This is a safe-cache copy of the original web site.