CSS scroll-snap-type Property

Description

The scroll-snap-type CSS property is used to control the behavior of scrolling within a container element, making it easier to create smooth and predictable scrolling experiences, particularly in web applications and websites. By defining values for scroll-snap-type, such as "x" or "y," it specifies the axis along which scrolling should snap, either horizontally or vertically. Additionally, you can set options like "mandatory" or "proximity" to determine whether the scrolling should always snap to defined points or just when the user's scrolling is near those points. This property is valuable for creating user-friendly interfaces with precise scrolling, especially for image galleries, carousels, and other interactive web content.

Initial value: none
Applies to: all elements
Inherited: no
Computed value: as specified
Animatable: discrete
JavaScript syntax: object.style.scrollSnapType

Interactive Demo

scroll-snap-type: none;

scroll-snap-type: x mandatory;

scroll-snap-type: x proximity;

Scroll »

Syntax

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

Values

noneWhen the visual viewport of this scroll container is scrolled, it must ignore snap points.
xThe scroll container snaps to snap positions in its horizontal axis only.
yThe scroll container snaps to snap positions in its vertical axis only.
blockThe scroll container snaps to snap positions in its block axis only.
inlineThe scroll container snaps to snap positions in its inline axis only.
bothThe scroll container snaps to snap positions in both of its axes independently (potentially snapping to different elements in each axis).
mandatoryThe visual viewport of this scroll container must snap to a snap position if it isn't currently scrolled.
proximityThe 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.

Example

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

/* 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;
}

Result

Editor