scroll-snap-type

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2019.

The scroll-snap-type CSS property sets how strictly snap points are enforced on the scroll container in case there is one.

Try it

Specifying any precise animations or physics used to enforce those snap points is not covered by this property but instead left up to the user agent.

Syntax

css
/* No snapping */
scroll-snap-type: none;

/* Keyword values for snap axes */
scroll-snap-type: x;
scroll-snap-type: y;
scroll-snap-type: block;
scroll-snap-type: inline;
scroll-snap-type: both;

/* Optional keyword values for snap strictness */
/* mandatory | proximity */
scroll-snap-type: x mandatory;
scroll-snap-type: y proximity;
scroll-snap-type: both mandatory;

/* Global values */
scroll-snap-type: inherit;
scroll-snap-type: initial;
scroll-snap-type: revert;
scroll-snap-type: revert-layer;
scroll-snap-type: unset;

Values

none

When the visual viewport of this scroll container is scrolled, it must ignore snap points.

x

The scroll container snaps to snap positions in its horizontal axis only.

y

The scroll container snaps to snap positions in its vertical axis only.

block

The scroll container snaps to snap positions in its block axis only.

inline

The scroll container snaps to snap positions in its inline axis only.

both

The scroll container snaps to snap positions in both of its axes independently (potentially snapping to different elements in each axis).

mandatory

The visual viewport of this scroll container must snap to a snap position if it isn't currently scrolled.

proximity

The visual viewport of this scroll container may snap to a snap position if it isn't currently scrolled. The user agent decides if it snaps or not based on scroll parameters. This is the default snap strictness if any snap axis is specified.

Note: If the content in the snap port is changed (e.g. added, moved, deleted, or resized) or the value of any scroll snap-related property (e.g. scroll-snap-type or scroll-margin) is changed, the scroll container will be resnapped according to the latest value of scroll-snap-type.

Formal definition

Initial valuenone
Applies toall elements
Inheritedno
Computed valueas specified
Animation typediscrete

Formal syntax

scroll-snap-type = 
  none                                                |
  [ x | y | block | inline | both ] [ mandatory | proximity ]?

Examples

Snapping in different axes

HTML

html
<div class="holster">
  <div class="container x mandatory-scroll-snapping" dir="ltr">
    <div>X Mand. LTR</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
  </div>
  <div class="container x proximity-scroll-snapping" dir="ltr">
    <div>X Prox. LTR</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
  </div>
  <div class="container y mandatory-scroll-snapping" dir="ltr">
    <div>Y Mand. LTR</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
  </div>
  <div class="container y proximity-scroll-snapping" dir="ltr">
    <div>Y Prox. LTR</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
  </div>
  <div class="container x mandatory-scroll-snapping" dir="rtl">
    <div>X Mand. RTL</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
  </div>
  <div class="container x proximity-scroll-snapping" dir="rtl">
    <div>X Prox. RTL</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
  </div>
  <div class="container y mandatory-scroll-snapping" dir="rtl">
    <div>Y Mand. RTL</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
  </div>
  <div class="container y proximity-scroll-snapping" dir="rtl">
    <div>Y Prox. RTL</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
  </div>
</div>

CSS

css
/* scroll-snap */
.x.mandatory-scroll-snapping {
  scroll-snap-type: x mandatory;
}
.x.proximity-scroll-snapping {
  scroll-snap-type: x proximity;
}
.y.mandatory-scroll-snapping {
  scroll-snap-type: y mandatory;
}
.y.proximity-scroll-snapping {
  scroll-snap-type: y proximity;
}

.container > div {
  text-align: center;
  scroll-snap-align: center;
  flex: none;
}

Results

Specifications

Specification
CSS Scroll Snap Module Level 1
# scroll-snap-type

Browser compatibility

BCD tables only load in the browser

See also