🛑 CSS scroll-snap-stop — Complete Tutorial

The CSS scroll-snap-stop property controls whether the user is allowed to “skip over” snap points while scrolling quickly. It ensures that important elements (slides, cards, sections) cannot be accidentally passed.

>>“Use scroll-snap-stop when you want every snap point to be respected — no skipping allowed.”

Note

✔ Applied to snap targets (children)
✔ Works only inside a container with scroll-snap-type
✔ Prevents skipping during fast scrolling or momentum on mobile

📦 Syntax

scroll-snap-stop syntax

scroll-snap-stop: normal | always;
ValueBehavior
normalDefault — snap points may be skipped during fast scrolling
alwaysForces each snap point to “catch” — cannot skip items

📌 When Should You Use scroll-snap-stop?

  • Prevent users from skipping slides in a carousel
  • Ensure step-by-step content can’t be bypassed
  • Better UX for product galleries and onboarding flows
  • Control momentum scrolling on mobile devices

🎨 1. Basic Example — Prevent Skipping Slides

No skipping

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

🎨 2. Full Setup with Container

Container + slides

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

.slide {
  scroll-snap-align: start;
  scroll-snap-stop: always; /* prevent skipping */
}

Now the slider will snap to each slide one-by-one, even during fast swipes.

🎨 3. Vertical Step-by-Step Content

Vertical snapping

.steps {
  height: 100vh;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
}

.step {
  height: 100vh;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

Perfect for onboarding screens or “scroll-through presentations”.

🎨 4. Using scroll-padding + scroll-snap-stop

Ensure snapping respects headers and spacing while still preventing skip.

Combined example

.container {
  scroll-snap-type: y mandatory;
  scroll-padding-top: 60px; /* sticky header offset */
}

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

🧪 Real-World Use Cases

1️⃣ Product Image Carousel

product gallery

.product-img {
  scroll-snap-align: center;
  scroll-snap-stop: always;
}

2️⃣ Timeline / Stepper Navigation

timeline

.step {
  scroll-snap-align: center;
  scroll-snap-stop: always;
}

3️⃣ “Story” or “Reel” Style Viewer

stories

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

⚠️ Common Mistakes

  • ❌ Applying scroll-snap-stop to the container (must be on children)
  • ❌ Expecting snapping without scroll-snap-type
  • ❌ Confusing scroll-snap-stop with scroll-padding
  • ❌ Using it where skipping is desirable (like free scrolling lists)

Note

Use scroll-snap-stop: always only when every snap position must be visited.

🔥 Summary

scroll-snap-stop ensures scroll snapping is strict and predictable. It prevents skipping and forces the scroll to stop at each designated snap point, creating a controlled and intentional scrolling experience.

>>“scroll-snap-stop brings discipline to scroll snapping — no more missed slides.”