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:
normalis the default value and allows an element to be scrolled past without snappingalwayswill 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
| Chrome | Firefox | IE | Edge | Safari |
|---|---|---|---|---|
| 69 | 68 | 11* | 79 | 11 |
Mobile / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 123 | 124 | 123 | 11.0-11.2 |
Note that Chrome may not support scroll-snap-stop: always; at the moment.
