Snap sections
Full-screen sections that snap on scroll, for presentations and landing stories.
Examples
Snap
One
Two
Three
Anatomy
.snap | A viewport-tall scroller (100dvh) with mandatory vertical snapping and no visible scrollbar. |
> section | Each slide: at least the viewport tall, snaps to its top edge, centres its content vertically. |
Accessibility
- The scrollbar is hidden, so nothing shows there is more. Make the scroller keyboard-reachable (a focusable control in each section, or
tabindex="0"and anaria-labelon the.snap) so arrow keys and Page Down work. - Snapping is mandatory: a section with more content than the viewport can be hard to read to the end. Keep each one short enough to fit.