The scroll-snap-stop CSS property is used to control whether scrolling should stop at snap points or continue smoothly through them. It allows you to define the scrolling behavior when the user interacts with a scrollable container that has scroll snap points.
The scroll-snap-stop property accepts the following values:
-
normal: This is the default value. The scrollable container will continue to scroll smoothly through snap points without stopping at each snap position. -
always: The scrollable container will stop at snap points when the user interacts with the scrolling mechanism, such as using the mouse wheel, trackpad, or touch gestures. This allows precise positioning at each snap point.
Here’s an example:
.scroll-container {
scroll-snap-type: y mandatory;
scroll-snap-stop: always;
}
In this example, the .scroll-container class sets the scroll-snap-stop property to always. It ensures that the scrollable container stops at each snap point when the user interacts with the scrolling mechanism, providing a precise and aligned scrolling experience.
It’s important to note that the scroll-snap-stop property works in conjunction with the scroll-snap-type property, which specifies the scrolling behavior and the presence of snap points within the container.
The scroll-snap-stop property is useful when you want to enforce the snap points and provide a more controlled scrolling experience for snap-enabled containers, such as image galleries or scrollable sections. It allows you to define whether scrolling should stop precisely at each snap position or continue smoothly through them.