Infinite scroll

Infinite scroll helps users parse a large number of items by breaking up lists and distributing the results.


Loading story...
Add infinite scroll to Pajamas UI Kit Create an issue


Numbered diagram of an infinite scroll structure
Infinite scroll structure
  1. Container: Wraps the content.
  2. Item: Item within the infinite scroll list.
  3. Scrollbar: Scrollbar that appears when scrolling the list.
  4. Count: Text displaying number of shown items out of total number of items in the list.


Based on an accessibility evaluation, there are accessibility concerns for infinite scrolling and it should be replaced with a load more pattern or pagination.

When to use

  • A list with content that updates frequently.
  • A list when there is no sort/filter functionality.

When not to use

  • If a list is more than 20 items long, consider using pagination.


  • Infinite scroll is triggered once the user has reached the 20th item of a list and there are more items to load.
  • A loading spinner appears at the bottom of the list for the duration of the load time.
  • When a user returns to a list from a list entry using the back button in the browser, they should be returned to the same place in the list where they left off.


List count

Always display a counter that details how many items have already loaded and how many items remain. This gives the user an indication of where they are relative to the list.


Add accessibility guidelines Create an issue

Last updated at: