Infinite scroll

Examples

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.

Guidelines

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.

Behavior

• 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.

Content

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.

Accessibility