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.

Related CSS topics