CSS scroll-snap-type Property

Beginner
5 min read
Updated: Oct 2026
3 examples
Live preview
CSS scroll-snap-type enabling snap scrolling on a container
Definition

Definition and Usage

The scroll-snap-type property opts a scroll container into scroll snapping. It sets the snap axis and how strictly snap points are enforced.

The initial value is none. It is not inherited. Children still need scroll-snap-align to create snap positions. Common pairs are x mandatory for carousels and y proximity for softer vertical snapping.

Baseline · Container property.

Standard-track and Widely available since April 2022. Set it on the overflow container, not on each slide. If you name an axis without strictness, proximity is the default.

Syntax

CSS Syntax

syntax.css
scroll-snap-type: none | <axis> [ mandatory | proximity ]? | initial | inherit;

Axis keywords: x, y, block, inline, or both.

Values

Property Values

ValueDescriptionTry it
noneDefault. Ignore snap pointsTry it
x mandatorySnap on the horizontal axis; must land on a snap pointTry it
x proximityHorizontal snap only when close enoughTry it
y mandatorySnap on the vertical axis; must land on a snap pointTry it
initialResets to noneTry it
inheritTakes the parent’s scroll-snap-typeTry it
Approach

How to Use scroll-snap-type

Turn on snapping on the container, then mark snap targets on the children.

  1. Create a scroll container with overflow-x or overflow-y set to auto or scroll.
  2. Set scroll-snap-type on that container (axis + optional strictness).
  3. Give each snap target scroll-snap-align.
  4. Optionally tune spacing with scroll-margin or scroll-padding.
PieceRequired?Role
Overflow containerYesThe element that actually scrolls
scroll-snap-typeYesAxis and strictness on the container
scroll-snap-alignYesCreates snap positions on children
StrictnessOptionalmandatory or proximity (default if omitted)
Try it

Live Preview

Scroll the strip sideways. Change scroll-snap-type on the container and feel how snapping changes.

Panels already use scroll-snap-align: start. Only the container’s scroll-snap-type changes.

Scroll →
1
2
3
4
5

scroll-snap-type: x mandatory

Code

CSS Examples

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

Example 1 — Horizontal Mandatory Snap

Force each slide to land on a snap point in a carousel-style strip.

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

  .panel {
    scroll-snap-align: start;
  }
</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. Make a horizontal scroller. overflow-x: auto creates the scrollport.
  2. Opt into snap. scroll-snap-type: x mandatory snaps on the x-axis and must land on a point.
  3. Mark targets. scroll-snap-align: start on each panel creates snap positions.
  4. Scroll and settle. When scrolling stops, the strip should lock to a panel edge.

Example 2 — Horizontal Proximity Snap

Allow freer scrolling that snaps only when you are close to a panel.

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

  .panel {
    scroll-snap-align: start;
  }
</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 axis, softer rule. Still snaps on x, but with proximity.
  2. Browser decides. It may leave the scroll between snap points if you are not close enough.
  3. Compare with mandatory. Mandatory feels stricter; proximity feels freer.
  4. Default strictness. Writing only x is treated like x proximity.

Example 3 — Vertical Mandatory Snap

Snap full-height panels in a vertical scroll box.

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

  .panel {
    scroll-snap-align: start;
  }
</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. Scroll vertically. overflow-y: auto makes the box scroll up and down.
  2. Snap on y. scroll-snap-type: y mandatory uses the vertical axis.
  3. Align panels. Each panel’s start edge becomes a snap point.
  4. Useful for sections. Common for onboarding screens or stacked cards.

Edge Cases & Pitfalls

If snapping never happens, the container or the child align is usually missing.

child

Needs scroll-snap-align on targets

Type alone is not enough. Children need scroll-snap-align to create snap positions.

where

Set type on the container

Put scroll-snap-type on the overflow element. Setting it only on slides does not enable snap for the scroller.

axis

Axis must match overflow

Use x with horizontal overflow and y with vertical overflow. A mismatch looks like snapping is broken.

strict

mandatory can feel sticky

Mandatory is great for carousels. For freer reading layouts, try proximity instead.

logical

block and inline follow writing mode

Prefer logical axes when layout may switch writing mode. x and y stay physical.

Compatibility

Browser Support

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

✓ Baseline · Widely available since 2022

scroll-snap-type

Chrome 69+, Firefox 68+, Safari 11+, Edge 79+, Opera 56+, Samsung Internet 10.1+. Internet Explorer does not support the modern syntax.

97% Modern browsers
Google Chrome 69+
Full support
Mozilla Firefox 68+
Full support
Apple Safari 11+
Full support
Microsoft Edge 79+
Full support
Opera 56+
Full support
Samsung Internet 10.1+
Full support
Internet Explorer No modern support
Not supported
scroll-snap-type Widely supported

Bottom line: Safe for modern carousels and section scrollers. Skip Internet Explorer. Pair with scroll-snap-align on children.

Remember

Key Takeaways

  • Role: enable snap scrolling on a container by axis and strictness.
  • Values: none, or an axis plus optional mandatory / proximity.
  • Initial value: none. Not inherited. Set on the overflow container.
  • Tip: always add scroll-snap-align on children or nothing will snap.

One line: scroll-snap-type turns on snap for a scroll container — pick an axis, then mandatory or proximity.

Frequently Asked Questions

It opts a scroll container into scroll snapping. You choose an axis (such as x or y) and optional strictness (mandatory or proximity).
none. The container ignores snap points until you set an axis.
mandatory must snap to a snap position when scrolling settles. proximity may snap when the scroll position is close enough; the browser decides.
On the scroll container — the element with overflow that holds the snap targets. Children need scroll-snap-align to create snap positions.
No. Set it on the container that scrolls. If you specify an axis without strictness, proximity is the default strictness.
It is Baseline and widely available since April 2022: Chrome 69+, Firefox 68+, Safari 11+, Edge 79+, Opera 56+. Internet Explorer does not support the modern syntax. It is a browser layout property, not a Node.js feature.

Next: scrollbar-color

Learn how to style scrollbar track and thumb colors.

scrollbar-color 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-stop Property CSS scrollbar-color Property