scroll-snap-stop

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

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

Related

• scroll-snap-type
• scroll-margin
• scroll-padding
• scroll-snap-align

Resources

• CSS Scroll Snap W3C Candidate Recommendation
• Practical CSS Scroll Snapping
• Introducing CSS Scroll Snap Points