CSS scroll-snap-type Property

What You’ll Learn

The scroll-snap-type property enables scroll snapping on a container. It defines the axis and how strictly the browser snaps to child snap targets.

Introduction

The scroll-snap-type property in CSS is a powerful feature that lets developers create smooth, scroll-snapping behavior for containers with overflow content.

It is especially useful for carousels, galleries, and any interface where you want precise control over scroll positions along the horizontal, vertical, or both axes.

Definition and Usage

Apply scroll-snap-type to the scroll container — the element with overflow: scroll or overflow: auto that wraps the snap targets.

Then set scroll-snap-align on child elements so the browser knows where each item should land when scrolling stops.

📝 Syntax

The syntax for the scroll-snap-type property combines an axis with a snap strictness value. It is applied to scroll containers.

element {
  scroll-snap-type: none | x mandatory | y proximity | both mandatory;
}

• Axis — x, y, or both sets the snapping direction.
• Strictness — mandatory always snaps; proximity snaps when close enough.

Basic Example

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

Related Properties

• scroll-snap-align — sets alignment on snap targets inside the container
• scroll-snap-stop — controls whether a snap target can be skipped during fast scrolling
• scroll-padding — insets the scrollport on the container

🎯 Default Value

The default value of the scroll-snap-type property is none, which means no scroll snapping occurs on the container.

💎 Property Values

When to Use scroll-snap-type

scroll-snap-type helps when scroll containers need predictable snap behavior:

• Horizontal carousels — Use x mandatory so each slide lands cleanly when scrolling stops.
• Vertical panel flows — Use y mandatory for full-height onboarding or story sections.
• Image galleries — Keep photos aligned consistently inside overflow scrollers.
• Soft snapping rows — Use proximity when snapping should feel helpful but not forced.

Set scroll-snap-type on the container first, then add scroll-snap-align on each snap target inside it.

Examples Gallery

Start with the reference horizontal carousel, try vertical snapping, compare proximity mode, then explore both-axis snapping.

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

  .scroll-item {
    flex: none;
    scroll-snap-align: start;
    width: 100%;
    height: 200px;
    background-color: #f5a623;
    margin-right: 10px;
  }
</style>

<div class="scroll-container">
  <div class="scroll-item">Item 1</div>
  <div class="scroll-item">Item 2</div>
  <div class="scroll-item">Item 3</div>
  <div class="scroll-item">Item 4</div>
</div>

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

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

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

scroll-snap-type in the family

scroll-snap-type is the container property that turns snapping on. Pair it with scroll-snap-align on child snap targets and optional scroll-snap-stop when certain items must never be skipped.

.scroll-container { scroll-snap-type: x mandatory; }
.scroll-item { scroll-snap-align: start; }

💡 Best Practices