CSS scroll-snap-stop Property

If this site has been useful, we’d love your support! Running this site takes time and resources, and every small contribution helps us keep creating valuable content. Consider buying us a coffee to keep things going strong!

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

Interactive Demo

The effect of this property can be noticed on devices with a touchpad. Try to scroll through all items with a single swing. Value 'normal' should pass through all pages, while 'always' will stop at the second page.

1
2
3
Scroll »

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

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

Browser Support

The following table will show you the current browser support for the CSS scroll-snap-stop property.

Desktop
Edge Chrome Firefox Opera Safari
7969685611
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview
696848111069

Last updated by CSSPortal on: 3rd January 2024