Loading pattern...

What is Infinite Scroll?

Infinite Scroll automatically loads more content as you scroll to the bottom of a page, creating an endless feed. No "Load More" button or pagination—new content appears seamlessly. Great for discovery-focused interfaces (social feeds, image galleries), terrible for goal-oriented tasks (search results, product catalogs).

When Should You Use This?

Use infinite scroll for content discovery where users browse without a specific goal: social feeds, image galleries, news feeds, video platforms. Perfect for mobile where tapping "Next Page" is annoying. Don't use for search results, e-commerce (users lose their place), or when users need to reach the footer. Combine with "Back to Top" button and state preservation (remember scroll position on back).

Common Mistakes to Avoid

  • Hiding the footer—users can never reach it; use pagination or "Load More" button near footer
  • No loading indicator—users don't know if more content is coming; show spinner at bottom
  • Not preserving state—losing scroll position on back navigation is infuriating
  • Performance issues—loading hundreds of items slows browser; virtualize long lists (react-window)
  • No way to jump—users can't skip ahead; consider hybrid (infinite + jump to page)

Real-World Examples

  • Twitter/X—infinite scroll for timeline, keeps you engaged
  • Pinterest—endless grid of images, perfect for discovery
  • Instagram—feed, Explore, Reels all use infinite scroll
  • TikTok—vertical infinite scroll, optimized for addiction

Category

Interaction Patterns

Tags

infinite-scrolllazy-loadingpaginationmobile-uxperformance

Permalink