CSS scroll-snap-stop Property

What You’ll Learn

The scroll-snap-stop property controls whether a snap target must be stopped at during scrolling. It helps prevent fast swipes from skipping important slides or panels.

Introduction

The scroll-snap-stop property in CSS is part of the CSS Scroll Snap Module. It works with scroll-snap-type and scroll-snap-align to create smooth and controlled scrolling experiences.

This property lets you specify whether a snap target must be stopped at even when the user scrolls quickly, which helps prevent important slides from being skipped.

Definition and Usage

Apply scroll-snap-stop to snap targets inside a scroll container — such as carousel slides inside a wrapper that already has scroll-snap-type enabled.

It works together with scroll-snap-type on the container and scroll-snap-align on each snap target.

📝 Syntax

The syntax for the scroll-snap-stop property is simple. It is applied to snap targets inside a scroll container.

element {
  scroll-snap-stop: normal | always;
}

Basic Example

.hero-slide {
  scroll-snap-stop: always;
}

Related Properties

• scroll-snap-type — enables snapping on the scroll container
• scroll-snap-align — sets how each snap target aligns in the scrollport
• scroll-padding — insets the scrollport on the container

🎯 Default Value

The default value of the scroll-snap-stop property is normal, which means snapping behaves normally without forcing an extra stop on that target.

💎 Property Values

When to Use scroll-snap-stop

scroll-snap-stop helps when some snap targets should never be skipped:

• Hero carousels — Force the first promotional slide to always stop, even during fast swipes.
• Onboarding flows — Make required steps stop instead of being skipped accidentally.
• Product highlights — Keep a featured item from being scrolled past too quickly.
• Story-style panels — Ensure key narrative sections get a deliberate pause.

Enable snapping on the container with scroll-snap-type first, set alignment with scroll-snap-align, then use always only where needed.

Examples Gallery

Start with the reference horizontal carousel, compare normal and always behavior, then try onboarding and vertical layouts.

<style>
  .scroll-container {
    display: flex;
    overflow-x: scroll;
    scroll-snap-type: x mandatory;
    width: 100%;
    height: 200px;
  }

  .item {
    flex: 0 0 100%;
    scroll-snap-align: center;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2em;
    color: white;
  }

  .item1 {
    background-color: #ff5733;
    scroll-snap-stop: always;
  }
  .item2 { background-color: #33c1ff; }
  .item3 { background-color: #33ff57; }
</style>

<div class="scroll-container">
  <div class="item item1">Item 1 (always)</div>
  <div class="item item2">Item 2 (normal)</div>
  <div class="item item3">Item 3 (normal)</div>
</div>

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

.carousel-slide {
  scroll-snap-align: start;
  scroll-snap-stop: normal;
}

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

scroll-snap-stop in the family

scroll-snap-stop works on snap targets inside a container that already has scroll-snap-type. Pair it with scroll-snap-align to control both where items land and whether they must stop.

.scroll-container { scroll-snap-type: x mandatory; }
.hero-slide { scroll-snap-align: center; scroll-snap-stop: always; }

💡 Best Practices