Infinite scroll
This course builds infinite scroll in a Rails app with tools the app already has. It starts by comparing offset pagination with Pagy against infinite scroll and explains when each one fits. It then covers IntersectionObserver and the sentinel pattern, Turbo Frames for scoped and lazy loading, and the Turbo Streams load-more pattern from the comment thread. A reusable Stimulus controller combines these pieces. The last lessons handle loading states, errors, scroll restoration, SEO and accessibility, then trace the full flow from query to rendered content.
What you'll learn
- ✓When to use pagination, a load-more button or infinite scroll
- ✓Detecting the end of a list with IntersectionObserver and a sentinel element
- ✓Appending records with Turbo Streams and the fetch N+1, use N pattern
- ✓Building a reusable infinite-scroll Stimulus controller
- ✓Handling loading states, errors, scroll restoration, SEO and accessibility
- ✓Testing the complete flow with system tests
Pagination vs infinite scroll
A web page with 500 records can't render them all at once. There are two solutions: pagination, which splits records into separate pages the user moves between, and infinite scroll, which loads more records as the user scrolls toward the bottom. Each pattern has trade-offs, and a well-built Rails…
Read the full lesson free →Curriculum
7 lessonsPagination vs infinite scroll
Compares Pagy offset pagination with infinite scroll and explains which pattern suits admin lists and content feeds.
IntersectionObserver: the scroll detector
Explains how IntersectionObserver and a sentinel element detect when the user nears the bottom of a list.
Turbo Frames for paginated content
Shows how Turbo Frames scope admin pagination and lazy-load content, and why infinite scroll uses Turbo Streams instead.
Turbo Streams append: the load-more pattern
Walks through the comment thread's load-more button, which appends records with Turbo Streams and detects the last page.
Building an infinite scroll Stimulus controller
Builds a reusable Stimulus controller that observes a sentinel, fetches the next page and prevents duplicate requests.
Edge cases: loading, errors, scroll restoration, SEO
Covers loading states, error retries, scroll restoration with the Turbo cache, SEO fallbacks and accessibility for infinite scroll.
Infinite scroll: putting it together
Traces a hypothetical feed from query to Turbo Stream response, with progressive enhancement and system tests.