CSS scroll-snap-stop Property

Beginner
5 min read
Updated: Oct 2026
3 examples
Live preview
CSS scroll-snap-stop controlling whether snap targets can be skipped during fast scrolling
Definition

Definition and Usage

The scroll-snap-stop property decides whether a scroll container may pass over a snap target during a fast scroll. Use normal to allow skipping, or always to force a stop at that snap position.

Set it on the snap target (the child), not on the container. The initial value is normal. It is not inherited. You still need scroll-snap-type on the container and scroll-snap-align on the targets.

Baseline · Fling-sensitive.

Standard-track and Widely available since July 2022. The always vs normal difference is clearest with a fast touchpad or touch fling, especially when the container uses mandatory snap.

Syntax

CSS Syntax

syntax.css
scroll-snap-stop: normal | always | initial | inherit;
Values

Property Values

ValueDescriptionTry it
normalDefault. Fast scrolls may pass over this snap pointTry it
alwaysMust stop at this snap point; cannot pass over itTry it
selective alwaysForce a stop only on chosen panels, such as the middle oneTry it
compare bothSame scroller setup with normal vs alwaysTry it
initialResets to normalTry it
inheritTakes the parent’s scroll-snap-stopTry it
Approach

How to Use scroll-snap-stop

Enable snap first, then mark which targets cannot be skipped.

  1. Make a scroll container with overflow-x: auto (or y) and scroll-snap-type: x mandatory.
  2. Give each slide scroll-snap-align.
  3. Set scroll-snap-stop: always on slides that must not be skipped.
  4. Leave the rest at normal (the default).
PieceRequired?Role
Scroll containerYesoverflow + scroll-snap-type (prefer mandatory)
scroll-snap-alignYesCreates the snap positions on each target
scroll-snap-stopOptionalalways blocks passing over that target
Fast fling inputHelpfulTouchpad or touch swipe shows the difference best
Try it

Live Preview

Fling sideways through the strip. Panel 2 is the highlighted target. Switch between normal and always, then try a fast swipe again.

Use a fast touchpad fling from panel 1 toward panel 3. With always, panel 2 should catch the scroll.

Scroll →
1
2
3
4
5

scroll-snap-stop: always on panel 2

Code

CSS Examples

Each snippet focuses on scroll-snap-stop. Use Try It Yourself for a live editor.

Example 1 — Force a Stop with always

Make every panel a hard stop so a fast fling cannot skip slides.

CSS
<style>
  .scroller {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
  }

  .panel {
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }
</style>

<div class="scroller">
  <div class="panel">1</div>
  <div class="panel">2</div>
  <div class="panel">3</div>
</div>
Try It Yourself

How It Works

  1. Enable mandatory snap. scroll-snap-type: x mandatory creates strict snap behavior.
  2. Align each panel. scroll-snap-align: start defines the snap points.
  3. Block pass-over. scroll-snap-stop: always tells the scroller it must stop at each panel.
  4. Fling to test. A fast swipe should still land on intermediate panels.

Example 2 — Allow Skipping with normal

Keep the default so a fast scroll may pass over intermediate snap points.

CSS
<style>
  .scroller {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
  }

  .panel {
    scroll-snap-align: start;
    scroll-snap-stop: normal;
  }
</style>

<div class="scroller">
  <div class="panel">1</div>
  <div class="panel">2</div>
  <div class="panel">3</div>
</div>
Try It Yourself

How It Works

  1. Same snap setup. The container and align rules stay the same as Example 1.
  2. Use the default stop. normal allows the scroller to pass over snap points during a fast fling.
  3. Compare with always. A strong swipe may jump from panel 1 toward a later panel.
  4. Still snaps at rest. When scrolling settles, it still lands on a snap target.

Example 3 — Always on One Important Panel

Force a stop only on the featured slide, and leave the others skippable.

CSS
<style>
  .scroller {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
  }

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

  .featured {
    scroll-snap-stop: always;
  }
</style>

<div class="scroller">
  <div class="panel">1</div>
  <div class="panel featured">2</div>
  <div class="panel">3</div>
</div>
Try It Yourself

How It Works

  1. Keep most panels normal. They can be skipped during a fast fling.
  2. Mark one as always. Panel 2 becomes a hard stop.
  3. Protect important content. Useful for a hero slide or required onboarding step.
  4. Avoid overusing always. Too many hard stops can make the scroller feel sticky.

Edge Cases & Pitfalls

If always seems to do nothing, check snap setup and how you scroll.

snap

Needs type and align first

Without scroll-snap-type and scroll-snap-align, there is no snap position for scroll-snap-stop to protect.

target

Set it on the child

Put scroll-snap-stop on the snap target. Setting it only on the container does not mark individual stops.

input

Wheel steps can hide the difference

Slow mouse-wheel ticks often stop at each snap even with normal. Use a fast touchpad or touch fling to compare.

mode

Works best with mandatory

With proximity, snapping is already looser, so forced stops are harder to notice. Prefer mandatory while learning.

ux

Too many always stops feel sticky

Reserve always for important panels. Leaving most slides at normal keeps fast scrolling usable.

Compatibility

Browser Support

scroll-snap-stop is a browser layout property for scroll snap. Node.js, Deno, and Bun do not apply it.

✓ Baseline · Widely available since 2022

scroll-snap-stop

Chrome 75+, Firefox 103+, Safari 15+, Edge 79+, Opera 62+, Samsung Internet 11+. Internet Explorer does not support it.

95% Modern browsers
Google Chrome 75+
Full support
Mozilla Firefox 103+
Full support
Apple Safari 15+
Full support
Microsoft Edge 79+
Full support
Opera 62+
Full support
Samsung Internet 11+
Full support
Internet Explorer No support
Not supported
scroll-snap-stop Widely supported

Bottom line: Safe for modern carousels. Skip Internet Explorer. Pair with scroll-snap-type: … mandatory and test with a fast fling.

Remember

Key Takeaways

  • Role: decide whether a snap target can be skipped during a fast scroll.
  • Values: normal may pass over; always forces a stop.
  • Initial value: normal. Not inherited. Set on the snap target.
  • Tip: use always sparingly on important slides, then fling-test on a touchpad.

One line: scroll-snap-stop chooses whether a snap target is skippable — always means no pass-over.

Frequently Asked Questions

It controls whether a scroll container may pass over a snap target during a fast scroll. normal allows skipping; always forces a stop at that snap position.
normal. The browser may pass over that snap point if the user scrolls quickly.
On the snap target (the child), not on the scroll container. The container still needs scroll-snap-type, and the target needs scroll-snap-align.
The difference is clearest with a fast fling on a touchpad or touch screen. Slow wheel steps often land on each snap even with normal.
No. Set it on each target that must not be skipped. Prefer always on important slides only.
It is Baseline and widely available since July 2022: Chrome 75+, Firefox 103+, Safari 15+, Edge 79+, Opera 62+. Internet Explorer does not support it. It is a browser layout property, not a Node.js feature.

Next: scroll-snap-type

Learn how to enable snap scrolling on a container.

scroll-snap-type tutorial →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

5 people found this page helpful

CSS scroll-snap-align Property CSS scroll-snap-type Property