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

  • ContinuousScrolling

    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.


    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

Required. Real name or initials only.
Required. Will not be published.
Vote down Vote up
Out of 139 votes, 80.58% like this one.

Example images

  • ContinuousScrolling

Is also called...

See it in action