scroll-snap-stop

Avatar of Andy Adams
Andy Adams on (Updated on )

UGURUS offers elite coaching and mentorship for agency owners looking to grow. Start with the free Agency Accelerator today.

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

See the Pen scroll-snap-stop example
by CSS-Tricks (@css-tricks) on CodePen.

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

ChromeFirefoxIEEdgeSafari
696811*7911

Mobile / Tablet

Android ChromeAndroid FirefoxAndroidiOS Safari
11511511511.0-11.2

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

Related

Resources