CSS scroll-snap-stop Property

Description

The scroll-snap-stop CSS property is used to control the scrolling behavior of elements within a scroll container with snap points. When applied to an element, it indicates that the scrolling should "stop" or "snap" at that particular element when the user is scrolling through the container. This means that when a user scrolls, the container will align itself in a way that the element with scroll-snap-stop becomes fully visible, providing a smooth and precise scrolling experience. This property is particularly useful in web design when you want to create a gallery or slider with distinct snap points for user interaction, enhancing the overall user experience.

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

Syntax

scroll-snap-stop: normal | always

Values

normalWhen the visual viewport of this element's scroll container is scrolled, it may "pass over" possible snap positions.
alwaysThe scroll container must not "pass over" a possible snap position; and must snap to the first of this elements' snap positions.

Example

HTML

<p>scroll-snap-stop: always (X Mandatory)</p>

<div class="x mandatory-scroll-snapping always-stop">

  <div>1</div>

  <div>2</div>

  <div>3</div>

  <div>4</div>

  <div>5</div>

</div>



<p>scroll-snap-stop: always (X Mandatory) on odd child elements</p>

<div class="x mandatory-scroll-snapping always-stop-odd">

  <div>1</div>

  <div>2</div>

  <div>3</div>

  <div>4</div>

  <div>5</div>

</div>



<p>scroll-snap-stop: always (X Mandatory) on even child elements</p>

<div class="x mandatory-scroll-snapping always-stop-even">

  <div>1</div>

  <div>2</div>

  <div>3</div>

  <div>4</div>

  <div>5</div>

</div>



<p>scroll-snap-stop: normal (X Mandatory)</p>

<div class="x mandatory-scroll-snapping normal-stop">

  <div>1</div>

  <div>2</div>

  <div>3</div>

  <div>4</div>

  <div>5</div>

</div>



<p>scroll-snap-stop: always (Y Mandatory)</p>

<div class="y mandatory-scroll-snapping always-stop">

  <div>1</div>

  <div>2</div>

  <div>3</div>

  <div>4</div>

  <div>5</div>

</div>



<p>scroll-snap-stop: normal (Y Mandatory)</p>

<div class="y mandatory-scroll-snapping normal-stop">

  <div>1</div>

  <div>2</div>

  <div>3</div>

  <div>4</div>

  <div>5</div>

</div>

CSS

/* setting up mandatory scroll-snap on parent */
.x.mandatory-scroll-snapping {
  scroll-snap-type: x mandatory;
}

.y.mandatory-scroll-snapping {
  scroll-snap-type: y mandatory;
}

/* defining scroll-snap alignment on children */
div > div {
  scroll-snap-align: center;
}

/* defining scroll-snap stop on children */
.always-stop > div {
  scroll-snap-stop: always;
}

.always-stop-odd > div:nth-of-type(odd) {
  scroll-snap-stop: always;
}

.always-stop-even > div:nth-of-type(even) {
  scroll-snap-stop: always;
}

.normal-stop > div {
  scroll-snap-stop: normal;
}

Result