Infinite scroll helps users parse a large number of items by breaking up lists and distributing the results.
- Container: Wraps the content.
- Item: Item within the infinite scroll list.
- Scrollbar: Scrollbar that appears when scrolling the list.
- Count: Text displaying number of shown items out of total number of items in the list.
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.
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.
Last updated at: