CSS scroll-snap-stop
The scroll-snap-stop property controls whether scrolling is allowed to skip over snap points. It is used inside scroll snap layouts.
Syntax
scroll-snap-stop: normal;
scroll-snap-stop: always;
Example
.carousel {
display: flex;
overflow-x: auto;
scroll-snap-type: x mandatory;
}
.carousel > section {
flex: 0 0 100%;
scroll-snap-align: start;
scroll-snap-stop: always;
}
always tells the browser not to skip that snap point during fast scrolling. It is useful for slide-by-slide interfaces where each item matters.
Common mistake
This property needs a scroll snap context. Without scroll-snap-type on the container and scroll-snap-align on children, there is nothing meaningful to stop at.