# Long Scroll

> A single page that uses vertical scroll as its primary navigation structure — each section unfolds like a chapter, paced for reading.

- Category: Layout-driven
- Era: 2012–present
- Origin: Apple product pages; scrollytelling journalism experiments
- Lesson: https://design.dawit.dev/styles/long-scroll
- Try it: https://design.dawit.dev/styles/long-scroll?style=long-scroll

## Where it came from

Long-scroll design uses the scroll gesture as a narrative device. Apple's product launch pages helped make it mainstream in the early-to-mid 2010s, with large type and imagery timed to scroll depth. Medium popularised it for editorial. The pattern works best when content has a natural sequence — a product argument, a story, a process — rather than a set of co-equal sections that users might want to reach in any order.

## How to spot it

- Generous vertical whitespace pacing the reader between ideas
- Section transitions that feel like chapter breaks — strong contrast between sections
- Typography and imagery scaled for comfortable reading at scroll speed
- Optional anchor navigation or a scroll-progress indicator

## Strengths

- Tells a clear story in a controlled sequence
- Works naturally for mobile-first without complex navigation structures
- Scroll-triggered reveals can create immersive narrative moments

## Weaknesses

- Hard to navigate non-sequentially — users cannot jump to page 3
- Very long pages increase page weight and risk Cumulative Layout Shift
- Users may not scroll far enough to reach content in the lower half

## In the wild

- Apple product launch pages
- Medium editorial long-form features
- Startup launch and brand story pages

## Use it when

Narrative-first content — product launches, case studies, brand stories — where a single sequential reading experience is the goal.

## Related styles
[Full Bleed](https://design.dawit.dev/styles/full-bleed.md), [Editorial](https://design.dawit.dev/styles/editorial.md), [Split Screen](https://design.dawit.dev/styles/split-screen.md)