Scroll Snap
A CSS property that locks scroll positions to defined points, making carousels and section-by-section pages feel controlled.
Plain English
Scroll snap solves a specific frustration: stopping between two cards while scrolling a horizontal carousel, unable to fully read either one. With scroll snap, the viewport snaps cleanly to the next card as soon as you release — no ambiguity, no half-visible content. It is ideal for product carousels, onboarding slides, fullscreen landing sections, and mobile image galleries. The key setting is whether snap is "mandatory" (always snaps) or "proximity" (snaps if close) — mandatory is more predictable for controlled galleries, proximity is gentler for continuous-scroll pages.
Technical
Parent container: scroll-snap-type: x mandatory (horizontal) or y mandatory (vertical); overflow-x: scroll; display: flex; gap: 12px; -webkit-overflow-scrolling: touch. Each child: scroll-snap-align: start (or center or end); flex-shrink: 0. To force stopping at every item: scroll-snap-stop: always. Smooth programmatic scroll: element.scrollTo({ left: index * itemWidth, behavior: "smooth" }).
Live Demo
Scroll snap carousel — drag or scroll →
Scroll snap ensures users always see a complete card — never a half-visible slice.
Usage
✓ Good usage
A mobile onboarding flow with 4 full-width slides snapping into place as the user swipes — each step is always fully visible and centered.
✗ Bad usage
Scroll snap on a long article page — readers naturally stop mid-paragraph and mandatory snap forces them to the next section.
Recommended values
- Parent: scroll-snap-type: x mandatory
- Child: scroll-snap-align: start
- Force stop: scroll-snap-stop: always
- Gap: 12–16px between items
- Item width: 80–90% of container for peek effect
- Add scroll-behavior: smooth for programmatic nav
Common mistakes
- Using mandatory on irregular-height content — if items are different sizes, snap positions feel wrong.
- No peek effect — setting items to 100% width removes the visual cue that more cards exist.
- Missing -webkit-overflow-scrolling: touch — scroll feels sluggish on older iOS Safari.
AI Prompt Example
Copy this into Claude, Cursor, Bolt, or v0.
Convert the product image gallery to a horizontal scroll-snap carousel. Set scroll-snap-type: x mandatory on the container. Set each image card to scroll-snap-align: start and width: 85% so the next card peeks. Add navigation dots that update on scroll. Smooth-scroll to any card when a dot is clicked.