scroll-snap-stop

scroll-snap-stop controls whether a directional scrolling operation may pass over a box’s snap position. It belongs on the snap target, not merely on the scrolling container.

Permit passing over targets

This rail uses normal. A sufficiently large directional gesture may skip intermediate panels; that does not disable the final snap.

<div
  class="rail"
  tabindex="0"
  role="region"
  aria-label="Scrollable practice panels"
>
  <div class="item">Panel one</div>
  <div class="item">Panel two</div>
  <div class="item">Panel three</div>
  <div class="item">Panel four</div>
</div>

.rail {
  display: flex;
  gap: 12px;
  width: 280px;
  max-width: 100%;
  overflow-x: auto;
  border: 2px solid #94a3b8;
  padding-block: 0.5rem;
}
.item {
  flex: 0 0 180px;
  min-height: 90px;
  background: #dbeafe;
  padding: 0.75rem;
  box-sizing: border-box;
}
.rail {
  scroll-snap-type: x mandatory;
}
.item {
  scroll-snap-align: start;
  scroll-snap-stop: normal;
}

Require the first encountered stop

Always prevents a directional operation from passing over that target’s eligible snap position. Compare a fling or repeated directional input with the normal version; device gestures and browser selection rules affect what you observe.

<div
  class="rail"
  tabindex="0"
  role="region"
  aria-label="Scrollable practice panels"
>
  <div class="item">Panel one</div>
  <div class="item">Panel two</div>
  <div class="item">Panel three</div>
  <div class="item">Panel four</div>
</div>

.rail {
  display: flex;
  gap: 12px;
  width: 280px;
  max-width: 100%;
  overflow-x: auto;
  border: 2px solid #94a3b8;
  padding-block: 0.5rem;
}
.item {
  flex: 0 0 180px;
  min-height: 90px;
  background: #dbeafe;
  padding: 0.75rem;
  box-sizing: border-box;
}
.rail {
  scroll-snap-type: x mandatory;
}
.item {
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

Values and defaults

The initial value is normal and the property is not inherited. Normal allows passing over a snap position; always requires stopping at the first eligible position encountered for the relevant directional scrolling operation. It does not set scrolling duration or easing.

Common mistakes

Always does not mean every API jump, scrollbar drag, or navigation request must visit every panel. Operations with only an intended end position are different from directional scrolling. Supply scroll-snap-align on targets and scroll-snap-type on their container. Test the actual input devices you support; this property is not a complete carousel interaction system or a substitute for accessible controls.

Learn scroll-snap-align, scroll-snap-type, and scroll-behavior.

Sources and browser support

MDN: scroll-snap-stop describes the syntax and links to the specification and compatibility data. Check individual values in that table when supporting older browsers.