scroll-snap-stop

The scroll-snap-stop CSS property defines whether or not the scroll container is allowed to "pass over" possible snap positions.

Try it

Syntax

css
/* Keyword values */
scroll-snap-stop: normal;
scroll-snap-stop: always;

/* Global values */
scroll-snap-stop: inherit;
scroll-snap-stop: initial;
scroll-snap-stop: revert;
scroll-snap-stop: revert-layer;
scroll-snap-stop: unset;

Values

normal

When the visual viewport of this element's scroll container is scrolled, it may "pass over" possible snap positions.

always

The scroll container must not "pass over" a possible snap position; and must snap to the first of this elements' snap positions.

Formal definition

Initial valuenormal
Applies toall elements
Inheritedno
Computed valueas specified
Animation typediscrete

Formal syntax

scroll-snap-stop = 
  normal  |
  always

Examples

Setting different snap stops

The example below demonstrates the contrast between the always and normal values of scroll-snap-stop. The difference in the two scroll-snap-stop values is more noticeable when the scroll-snap-type property is set to mandatory, which is what is used in this example.

HTML

html
<p>scroll-snap-stop: always (X Mandatory)</p>
<div class="x mandatory-scroll-snapping always-stop">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

<p>scroll-snap-stop: always (X Mandatory) on odd child elements</p>
<div class="x mandatory-scroll-snapping always-stop-odd">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

<p>scroll-snap-stop: always (X Mandatory) on even child elements</p>
<div class="x mandatory-scroll-snapping always-stop-even">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

<p>scroll-snap-stop: normal (X Mandatory)</p>
<div class="x mandatory-scroll-snapping normal-stop">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

<p>scroll-snap-stop: always (Y Mandatory)</p>
<div class="y mandatory-scroll-snapping always-stop">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

<p>scroll-snap-stop: normal (Y Mandatory)</p>
<div class="y mandatory-scroll-snapping normal-stop">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

CSS

css
/* setting up mandatory scroll-snap on parent */
.x.mandatory-scroll-snapping {
  scroll-snap-type: x mandatory;
}

.y.mandatory-scroll-snapping {
  scroll-snap-type: y mandatory;
}

/* defining scroll-snap alignment on children */
div > div {
  scroll-snap-align: center;
}

/* defining scroll-snap stop on children */
.always-stop > div {
  scroll-snap-stop: always;
}

.always-stop-odd > div:nth-of-type(odd) {
  scroll-snap-stop: always;
}

.always-stop-even > div:nth-of-type(even) {
  scroll-snap-stop: always;
}

.normal-stop > div {
  scroll-snap-stop: normal;
}

Result

Scroll from left to right and from top to bottom in the X and Y boxes below, respectively. In the X and Y boxes where the scroll-snap-stop property is set to always, the scrolling is forced to stop at the snap point even when you scroll fast. However, in the boxes where the scroll-snap-stop property is set to normal, the snap points are skipped when you scroll fast.

If required, you can be selective about the items that are always stopped at inside the scroll container. This is demonstrated in the example below by targeting odd and even items; you can choose a different strategy based on your requirement. In the example below, scrolling does not "pass over" odd and even items in the second and third boxes, respectively.

Specifications

Specification
CSS Scroll Snap Module Level 1
# scroll-snap-stop

Browser compatibility

BCD tables only load in the browser

See also