Infinite Scroll

Last updated:

Practical patterns for when continuous loading helps — and when pagination is the safer choice.

01 — Foundation

Infinite scroll is a trade-off

Loading more as users scroll feels effortless until they need to stop, share, or go back.

Infinite scroll removes page boundaries and can suit feeds where users browse forward continuously. It also removes reliable footers, breaks “back to where I was”, and makes comparison across items harder. Choose it deliberately — not because pagination felt old-fashioned.

02 — When

When infinite scroll fits

Feeds and timelines differ from catalogues, admin tables, and checkout flows.

  • reasonable fit: social feeds, activity streams, image galleries browsed casually
  • poor fit: legal docs, invoices, settings lists, anything users must compare or export
  • prefer pagination when users need stable URLs, footers, or precise position

03 — Behaviour

Implementation expectations

If you load more content, users need feedback and control.

  • visible loading indicator and error recovery — not silent failure at the bottom
  • “Load more” button as progressive enhancement or primary control on slow networks
  • preserve scroll position when returning where the platform allows
  • avoid hijacking scroll on nested containers without clear boundaries 
<button type="button" id="load-more" aria-controls="results">
    Load more results
</button>
<div id="results" aria-live="polite"></div>

04 — Accessibility

Accessibility and performance

Endless DOM growth and focus loss are the hidden costs.

  • announce new content without spamming — polite live regions, not every row
  • keyboard users need a path to newly loaded items and a way to pause loading
  • cap or virtualise very long lists; thousands of DOM nodes hurt everyone
  • respect reduced motion; avoid scroll-jacking loaders

05 — Review

Before you approve

A short checklist for infinite scroll in code review.

  • the use case truly benefits from continuous loading
  • loading, error, and end-of-list states are clear
  • pagination or “load more” is available where users need control