<pre class="brush: css notranslate"><code><span class="token comment">/ Keyword values /</span> <span class="token property">scroll-snap-stop</span><span class="token punctuation">:</span> normal<span class="token punctuation">;</span> <span class="token property">scroll-snap-stop</span><span class="token punctuation">:</span> always<span class="token punctuation">;</span> <span class="token comment">/ Global values /</span> <span class="token property">scroll-snap-type</span><span class="token punctuation">:</span> inherit<span class="token punctuation">;</span> <span class="token property">scroll-snap-type</span><span class="token punctuation">:</span> initial<span class="token punctuation">;</span> <span class="token property">scroll-snap-type</span><span class="token punctuation">:</span> unset<span class="token punctuation">;</span> </code></pre>

scroll-snap-stop

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

/* Keyword values */ scroll-snap-stop: normal; scroll-snap-stop: always;  /* Global values */ scroll-snap-type: inherit; scroll-snap-type: initial; scroll-snap-type: unset; 

Syntax

Values

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

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

Formal definition

Formal syntax

normal | always

Examples

Snapping in different axes

This example is duplicated from scroll-snap-type with minor variances.

/* setup */ :root, body {   height: 100%;   display: flex;   align-items: center;   justify-content: space-between;   flex-flow: column nowrap;   font-family: monospace; } .container {   display: flex;   overflow: auto;   outline: 1px dashed lightgray;   flex: none; }  .container.x {   width: 100%;   height: 128px;   flex-flow: row nowrap; }  .container.y {   width: 256px;   height: 256px;   flex-flow: column nowrap; } /* definite scroll snap */ .mandatory-scroll-snapping > div {   scroll-snap-stop: always; } .proximity-scroll-snapping > div {   scroll-snap-stop: normal; } /* scroll-snap */ .x.mandatory-scroll-snapping {   scroll-snap-type: x mandatory; }  .y.mandatory-scroll-snapping {   scroll-snap-type: y mandatory; }  .x.proximity-scroll-snapping {   scroll-snap-type: x proximity; }  .y.proximity-scroll-snapping {   scroll-snap-type: y proximity; }  .container > div {   text-align: center;   scroll-snap-align: center;   flex: none; }  .x.container > div {   line-height: 128px;   font-size: 64px;   width: 100%;   height: 128px; }  .y.container > div {   line-height: 256px;   font-size: 128px;   width: 256px;   height: 256px; } /* appearance fixes */ .y.container > div:first-child {   line-height: 1.3;   font-size: 64px; } /* coloration */ .container > div:nth-child(even) {   background-color: #87EA87; }  .container > div:nth-child(odd) {   background-color: #87CCEA; } 

<div class="container x mandatory-scroll-snapping" dir="ltr">   <div>X Mand. LTR </div>   <div>2</div>   <div>3</div>   <div>4</div>   <div>5</div> </div>  <div class="container x proximity-scroll-snapping" dir="ltr">   <div>X Proximity LTR</div>   <div>2</div>   <div>3</div>   <div>4</div>   <div>5</div> </div>  <div class="container y mandatory-scroll-snapping" dir="ltr">   <div>Y Mand. LTR</div>   <div>2</div>   <div>3</div>   <div>4</div>   <div>5</div> </div>  <div class="container y proximity-scroll-snapping" dir="ltr">   <div>Y Prox. LTR</div>   <div>2</div>   <div>3</div>   <div>4</div>   <div>5</div> </div>  <div class="container x mandatory-scroll-snapping" dir="rtl">   <div>X Mandatory RTL</div>   <div>2</div>   <div>3</div>   <div>4</div>   <div>5</div> </div>  <div class="container x proximity-scroll-snapping" dir="rtl">   <div>X Proximity RTL</div>   <div>2</div>   <div>3</div>   <div>4</div>   <div>5</div> </div>  <div class="container y mandatory-scroll-snapping" dir="rtl">   <div>Y Mand. RTL</div>   <div>2</div>   <div>3</div>   <div>4</div>   <div>5</div> </div>  <div class="container y proximity-scroll-snapping" dir="rtl">   <div>Y Prox. RTL</div>   <div>2</div>   <div>3</div>   <div>4</div>   <div>5</div> </div> 

Specifications

See also