🔗 CSS scroll-snap-type — Complete Tutorial

The CSS scroll-snap-type property enables snap scrolling, where the scroll position locks onto specific points. This creates smooth, precise, app-like navigation in sliders, carousels, galleries, timelines, and full-page scroll layouts.

>>“scroll-snap-type turns free scrolling into controlled, intentional snapping.”

Note

✔ Applied to the scroll container

✔ Determines the axis + strictness of snapping

✔ Requires scroll-snap-align on child elements

📦 Syntax

scroll-snap-type syntax

scroll-snap-type: none | x | y | block | inline | both mandatory | both proximity;
ValueDescription
noneNo snapping (default)
xSnaps horizontally
ySnaps vertically
blockSnap along block axis (vertical for English)
inlineSnap along inline axis (horizontal for English)
bothSnap in both directions
mandatorySnap must occur — cannot stop between snap points
proximitySnap only when near a snap point

Note

Axis + Behavior → Example:scroll-snap-type: x mandatory;

📌 How Snapping Works

scroll-snap-type goes on the container, while scroll-snap-align goes on the children.

Scroll container

.container {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
}

Snap targets

.slide {
  scroll-snap-align: center;
}

🎨 1. Horizontal Slider

Horizontal snapping

.slider {
  display: flex;
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
}

.slide {
  scroll-snap-align: start;
}

Each slide snaps to the left edge.

🎨 2. Vertical Step-by-Step Sections

Vertical snapping

body {
  scroll-snap-type: y mandatory;
}

section {
  height: 100vh;
  scroll-snap-align: start;
}

Great for full-page scroll experiences.

🎨 3. Proximity Snapping (Soft Snapping)

Proximity

.gallery {
  overflow-x: auto;
  scroll-snap-type: x proximity;
}

Snaps only when close — the user can still stop mid-way.

🎨 4. Snapping in Both Directions

Both directions

.grid-scroll {
  overflow: auto;
  scroll-snap-type: both mandatory;
}

.item {
  scroll-snap-align: center;
}

Useful for maps, large canvases, or 2D UI layouts.

🎨 5. Inline & Block Logical Snapping

Respects writing-mode; useful for international layouts.

Logical snap types

.logical-scroll {
  scroll-snap-type: block mandatory; /*.vertical for English*/
}

📌 Combine With scroll-padding & scroll-snap-stop

scroll-snap ecosystem

.container {
  scroll-snap-type: x mandatory;
  scroll-padding-left: 20px;
}

.item {
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

This combination gives precise and strict snapping behavior.

🧪 Real-World Use Cases

1️⃣ Carousels / Sliders

Carousel

.carousel {
  display: flex;
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
}

2️⃣ Onboarding Screens

Onboarding

.screen {
  height: 100vh;
  scroll-snap-align: start;
}

3️⃣ Product Image Viewer

Product viewer

.product-images {
  scroll-snap-type: x proximity;
}

4️⃣ Timeline Navigation

Timeline

.timeline {
  scroll-snap-type: x mandatory;
}

⚠️ Common Mistakes

  • ❌ Forgetting to add scroll-snap-align to child elements
  • ❌ Expecting smooth animation without scroll-behavior: smooth
  • ❌ Using mandatory when free scrolling is desired
  • ❌ Snapping without enough scrollable overflow

Note

scroll-snap-type = container rule
scroll-snap-align = element alignment
scroll-snap-stop = strictness

🔥 Summary

scroll-snap-type is the core of scroll snapping. It defines the snapping axis and behavior, making scroll interactions smooth, elegant, and predictable.

>>“With scroll-snap-type, scrolling feels intentional — not accidental.”