The Infinite Scroll

also known as: The Endless Feed, The Content Devourer, The Pagination Abolisher

Threat Level

★★★★★

ClassDisplay · Consumption Family

RarityCommon

CRCR 4

HabitatSocial feeds, product grids, search results, image galleries; anywhere content is unbounded and the summoner has decided that pagination is undesirable

"The Infinite Scroll abolishes the concept of 'the end.' There is no final page, no last item, no natural stopping point. The creature extends itself indefinitely as the user descends, consuming attention and time in exchange for the promise that more content awaits. It is the most seductive creature in the Codebase — and among the most hostile to users who need to find something they have already seen."

— Excerpt from 'Consumption Patterns and the Ecology of Attention,' Heuristic Order internal memorandum

The Infinite Scroll exists because someone decided that pagination — discrete pages with a known endpoint — was too much friction. The creature loads an initial set of items, then appends more as the user approaches the bottom of the scroll container. In theory this creates a seamless, continuous experience. In practice it creates a dungeon with no map, no landmarks, and no way to return to a previously viewed item except by scrolling back through everything that has loaded since. The creature's CHA 15 reflects its ability to persuade product owners that it improves engagement. The creature's WIS 9 reflects the fact that engagement is not always the same as usability.

The Infinite Scroll is well-suited to one use case: casual browsing of homogeneous content where the user has no specific target. Social feeds, image galleries, and discovery-oriented product grids fit this profile. The creature is poorly suited to any context where the user is searching for something specific, needs to compare items across the list, or must return to a previously viewed item. In these contexts, the absence of pagination is not a feature. It is an obstacle. The Heuristic Order recommends that the Infinite Scroll be confined to discovery contexts and that all other contexts retain pagination, "Load more" buttons, or a hybrid approach that provides both infinite loading and a means of navigation.

Fig. XIII — The Infinite Scroll: a long vertical creature with stacked content blocks, a loading indicator at the base, arrow suggesting continuous descent.

The creature's accessibility failures are structural. When new content loads, it is typically inserted at the bottom of the list. Screen reader users who have navigated to the bottom to trigger loading may find that focus is lost, that the new content is not announced, or that they are returned to the top of the page. Keyboard users who rely on the scroll position to orient themselves may be disoriented when the DOM grows beneath them. Users with cognitive differences who need to process content in discrete chunks may find the endless stream overwhelming. The Infinite Scroll assumes a user who scrolls continuously and never needs to go back. That user exists. Many others do not.

swords Vital Statistics

STR8(−1)

DEX13(+1)

CON10(+0)

INT12(+1)

WIS9(−1)

CHA15(+2)

auto_awesome Special Abilities

Scroll Boundary Detection (Passive). The creature monitors the user's scroll position. When the user approaches the bottom of the content — typically within a threshold of 200 to 400 pixels — it triggers a load of additional items. The threshold must be large enough to allow loading to complete before the user reaches the actual bottom, preventing a jarring pause. The implementation typically uses Intersection Observer rather than scroll events, as the former is more performant and does not fire during every scroll frame. The loading trigger element — a sentinel div at the bottom of the list — should be present in the DOM but may be visually hidden.

Content Appending (Action). New items are appended to the bottom of the existing list. The DOM grows. The scroll position is preserved — the user does not jump to the top. This is the minimum acceptable behaviour. Superior implementations also preserve focus for keyboard users, announce new content to screen reader users via an ARIA live region ("10 new items loaded"), and provide a "Load more" button as a fallback for users who cannot or prefer not to trigger loading by scrolling. The "Load more" button is not a concession. It is a requirement for accessibility.

Loading State Communication (Passive). While additional content is being fetched, the creature displays a loading indicator — a spinner, skeleton placeholders, or a "Loading..." message. This indicator must be communicated to assistive technology. A role="status" or aria-live="polite" region that announces "Loading more content" when loading begins and "Content loaded" when loading completes allows screen reader users to understand that the list is expanding. Without this, the user may assume the page has frozen or that no more content exists.

End-of-List Communication (Passive). When all content has been loaded and no more items exist, the creature must communicate this clearly. A "You've reached the end" message or similar prevents users from scrolling indefinitely in search of content that does not exist. This message should be in an ARIA live region so that screen reader users are informed when they reach the end. The alternative — a loading spinner that never resolves, or silence — leaves users uncertain whether to continue scrolling or abandon the page.

shield Weaknesses

"Load more" button — provides an alternative to scroll-triggered loading; required for keyboard users who cannot scroll and for users who prefer explicit control
ARIA live region for new content — announces "X items loaded" when new content appears; prevents screen reader users from being unaware that the list has expanded
End-of-list message — "You've reached the end" or equivalent; prevents infinite scrolling in search of non-existent content
Focus preservation — when new content loads, focus should not jump; keyboard users rely on scroll position and focus to orient themselves
Pagination hybrid — when the use case demands findability (search results, product grids with comparison), offer pagination alongside or instead of infinite scroll
Performance budgeting — the DOM grows without bound; virtualisation or limiting the total number of rendered items may be necessary for very long lists

category Known Variants

The Social Feed — the creature's most common habitat. Homogeneous content (posts, updates), casual browsing, no need to return to specific items. The Infinite Scroll is defensible here, provided accessibility mitigations are in place.
The Product Grid — infinite scroll on product listing pages. Problematic when users need to compare products or return to a previously viewed item. The Heuristic Order recommends "Load more" or pagination for product grids.
The Search Results Infinite Scroll — loading more results as the user scrolls. Actively harmful. Search results are a lookup task; users need to find a specific result, potentially compare results, and return to the search box to refine. Infinite scroll destroys all of these. Pagination is non-negotiable for search.
The Image Gallery — infinite loading of images. Common on photo-sharing platforms. Acceptable for discovery; unacceptable when the user is searching for a specific image they have seen before.
The "Load more" Button — a variant that requires explicit user action rather than scroll. Technically not infinite scroll, but achieves similar "no pagination" UX with significantly better accessibility. The Order recommends this over scroll-triggered loading when in doubt.

edit_note Field Notes

Note I. — Before summoning the Infinite Scroll, ask: does the user need to find something specific? If the answer is yes, do not use infinite scroll. Pagination provides waypoints, a known total, and the ability to return to a previous page. Infinite scroll provides none of these. The creature is for discovery, not retrieval.

Note II. — Always provide a "Load more" button in addition to scroll-triggered loading. Some users cannot scroll — they may use keyboard navigation, switch access, or voice control. Some users prefer explicit control. The button costs little and satisfies both. Place it at the bottom of the list, and ensure it is visible and focusable before any scroll-triggered load occurs.

Note III. — When new content loads, announce it. An aria-live="polite" region that says "20 more items loaded" allows screen reader users to understand that the list has expanded. Without this, the user may believe they have reached the end or that the page has stopped responding. The announcement should be brief and informative.

The Component Bestiary · Vol. II · Entry XIII — The Infinite Scroll