Scroll-snap-stop | CSS-Tricks

scroll-snap-stop is part of the CSS Scroll Snap Module. Scroll snapping refers to “locking” the position of the viewport to specific elements on the page as the window (or a scrollable container) is scrolled. Think of a scroll-snapping container like putting a magnet on top of an element that sticks to the top of the viewport and forces the page to stop scrolling right there.

scroll-snap-stop is an optional property for a scroll-snapping element within a scroll-snapping container. For more information on scroll-snapping containers see the scroll-snap-type almanac entry.

scroll-snap-stop allows you to force the scroll-snapping container to snap to a particular element. Suppose you were scrolling within a scroll-snapping container, and you gave it a giant spin-of-the-mousewheel. Normally, the browser would let the velocity of your scrolling fly past snap points until it settled on a snap point close to where the scrolling would normally end. By setting scroll-snap-stop you can tell the browser that it must stop on a particular element before allowing the user past it.

/* Assuming this element is a child of a container with `scroll-snap-type` set */
.element {
  scroll-snap-stop: always;
}

Syntax

scroll-snap-stop: normal | always;

Values

scroll-snap-stop accepts the following values:

normal is the default value and allows an element to be scrolled past without snapping
always will force the browser to snap to this element, even if the scroll would normally go past this element

Example

Browser Support

This browser support data is from Caniuse, which has more detail. A number indicates that browser supports the feature at that version and up.

Desktop

Chrome	Firefox	IE	Edge	Safari
69	68	11*	79	11

Mobile / Tablet

Android Chrome	Android Firefox	Android	iOS Safari
127	127	127	11.0-11.2

Note that Chrome may not support scroll-snap-stop: always; at the moment.