scroll-snap-type

scroll-snap-type opts a scroll container into snapping and chooses its axis and strictness. Children still need snap positions.

Snap near a panel boundary

Proximity lets the browser decide whether a nearby target should attract the final scroll position. The rail remains focusable and keyboard-scrollable.

<div
  class="rail"
  tabindex="0"
  role="region"
  aria-label="Scrollable practice panels"
>
  <div class="item">Panel one</div>
  <div class="item">Panel two</div>
  <div class="item">Panel three</div>
  <div class="item">Panel four</div>
</div>

.rail {
  display: flex;
  gap: 12px;
  width: 280px;
  max-width: 100%;
  overflow-x: auto;
  border: 2px solid #94a3b8;
  padding-block: 0.5rem;
}
.item {
  flex: 0 0 180px;
  min-height: 90px;
  background: #dbeafe;
  padding: 0.75rem;
  box-sizing: border-box;
}
.rail {
  scroll-snap-type: x proximity;
}
.item {
  scroll-snap-align: start;
}

Use mandatory snapping for short panels

The short panels fit in the viewing area. Mandatory requires an eligible snap position when scrolling finishes; its motion/timing remains browser-defined.

<div
  class="rail"
  tabindex="0"
  role="region"
  aria-label="Scrollable practice panels"
>
  <div class="item">Panel one</div>
  <div class="item">Panel two</div>
  <div class="item">Panel three</div>
  <div class="item">Panel four</div>
</div>

.rail {
  display: flex;
  gap: 12px;
  width: 280px;
  max-width: 100%;
  overflow-x: auto;
  border: 2px solid #94a3b8;
  padding-block: 0.5rem;
}
.item {
  flex: 0 0 180px;
  min-height: 90px;
  background: #dbeafe;
  padding: 0.75rem;
  box-sizing: border-box;
}
.rail {
  scroll-snap-type: x mandatory;
}
.item {
  scroll-snap-align: start;
}

Values and defaults

The initial value is none and the property is not inherited. Choose x/y physical axes, block/inline logical axes, or both. Add mandatory or proximity; proximity is the default strictness when an axis is supplied. None disables snapping. Mandatory alone is not the complete ordinary axis-and-strictness syntax.

Common mistakes

No overflow means no scrolling to snap. No target scroll-snap-align means no child snap position. Mandatory can make intermediate content awkward to reach when targets are taller than the viewport or irregularly spaced, so test all content and controls. Snapping is not automatic slide advance, selection state, or keyboard navigation logic. Use scroll-padding to account for obscuring toolbars.

Learn scroll-snap-align, scroll-snap-stop, and overflow.

Sources and browser support

MDN: scroll-snap-type describes the syntax and links to the specification and compatibility data. Check individual values in that table when supporting older browsers.