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 */
scroll-snap-stop: normal | always;
scroll-snap-stop accepts the following values:
normalis the default value and allows an element to be scrolled past without snapping
alwayswill force the browser to snap to this element, even if the scroll would normally go past this element
This browser support data is from Caniuse, which has more detail. A number indicates that browser supports the feature at that version and up.
Mobile / Tablet
Note that Chrome may not support
scroll-snap-stop: always; at the moment.