Skip to content
UX Atlas
Plate PAT·021 · PatternGrid E1 · Rev. 2026-09-14

Infinite Scroll and Pagination

Three ways to handle long result sets, each with a different cost, and the right choice depends on the task.

PatternCraft conventionIntermediate

Definition

Long lists can be paginated, extended by a load-more control, or loaded continuously as the user scrolls. The decision affects findability, accessibility, and whether users can return to a position.

Craft convention. True because the industry converged on it. Breaking it costs familiarity, not correctness.

On this plate
  1. 1Definition
  2. 2Choosing between them
  3. 3If the stream is the right shape
  4. 4Making return navigation work
  5. 5The complaint, drawn
  6. 6In practice
  7. 7Commonly confused with
  8. 8Local chart
  9. 9Continue from here

Reach for this when

  • Result sets exceed one screen.
  • Deciding how users move through long lists.
  • The content is a stream that is browsed rather than searched, and no item needs to be found again by position.

Common mistakes

  • Infinite scroll on goal-directed search results.
  • Losing position when returning from a detail view.
  • Unreachable footer content.

Choosing between them

ApproachGood forCost
PaginationGoal-directed search, results users return to, anything needing a footerExtra interaction per page. Feels dated in feeds.
Load moreBrowsing where position mattersManual, but preserves scroll position and keeps the footer reachable.
Infinite scrollExploratory feeds with no destinationUnreachable footer, lost position on return, memory growth, poor keyboard experience.

If the stream is the right shape

Do

  • Restore the position when the reader returns from an item.
  • Provide a route to anything that would otherwise live in the footer.
  • Announce new items through a live region, and keep them reachable by keyboard.
  • Offer Load more as the manual variant when position matters.

Do not

  • Use it where the reader needs to find their way back to a specific item.
  • Put essential links in a footer the reader can never reach.
  • Load endlessly on a slow connection with no indication of cost.
  • Reset the scroll position on navigation back, which is the single most common complaint.

Making return navigation work

Losing the reader's place is the defect that makes people abandon a stream, and it is entirely fixable.

  1. 1

    Give every item a URL

    Opening an item is navigation, not a state change, so the reader can share it and come back to it.

  2. 2

    Record the anchor, not the pixel offset

    Store which item was at the top. Offsets break the moment an image loads at a different height.

  3. 3

    Restore the pages that were loaded

    Returning to page one of a stream the reader had scrolled through ten pages of is the complaint, not the scroll position itself.

  4. 4

    Virtualise, and cap what is retained

    Long sessions otherwise grow memory until the tab becomes unusable on mid-range phones.

  5. 5

    Give the footer somewhere else to live

    Anything essential that would sit below the stream moves into the header or a sidebar, since the bottom is unreachable by design.

The complaint, drawn

itembackPosition restoredback returns to the item openeditembackReset to the topten pages of scrolling, gone
Opening an item and coming back is the most common thing anyone does in a stream. Losing the position on the way back is what makes people abandon it.

In practice

  1. i.

    Load more as the middle ground

    Catalogues

    A load-more button keeps scroll position on back navigation, keeps the footer reachable and still avoids page reloads. It is frequently the right answer when a team is arguing between the other two.

  2. ii.

    Back, and back to the top

    Lost position

    Opening an item from position four hundred and returning to the top of the list makes the pattern unusable for browsing. Position restoration is not a refinement here, it is the requirement.

Commonly confused with

Close neighbours that get substituted for each other. The difference is stated first, then the condition that picks one over the other.

vs.

Pagination

Component

Content split into numbered pages, each one a stable, linkable position.

Key difference

Pagination gives every item an address you can return to, count and share. Infinite scroll removes the interruption and gives that up: position, footer access and the ability to say where you were.

Use Infinite Scroll and Pagination when

  • The stream is browsed rather than searched, as in a feed.
  • No individual item needs to be found again by position.
  • Nothing important sits below the list.

Use Pagination when

  • Readers need to return to, cite or share a position in the set.
  • How much is left matters, as in search results or an archive.
  • There is a footer people are expected to reach.

Learn about Pagination

Local chart

PAT·021 · Region III · Grid E1

This entry and the entries it is stated to connect with. Each line is labelled with what the connection means.

Performance as User ExperienceFND·054 · PRINCIPLES BEHIND THISKeyboard NavigationA11Y·002 · DEPENDS ONCarouselCMP·027 · OFTEN USED WITHFilteringPAT·004 · OFTEN USED WITHLoading StatesPAT·011 · OFTEN USED WITHSearchPAT·002 · OFTEN USED WITHPaginationCMP·021 · ALTERNATIVE APPROACHMobile UX ChecklistCHK·003 · CHECK YOUR WORKInfinite ScrollTERM·052 · SHORT DEFINITIONLazy LoadingTERM·128 · SHORT DEFINITION

Continue from here

Each link says what the connection is, so you can tell a principle from an alternative from a thing people mix this up with.

Applies when you are designing

A Data TableA Mobile AppA Search Experience

Principles behind this

The reasoning this solution is an application of.

Depends on

Get these right first, or this one will not hold.

Often used with

These usually appear in the same screen or the same decision.

Check your work

Review passes that test whether this was done properly.

Short definition

The one-paragraph version, for when that is all you need.