Codectionary / Developer documentation / CSS

Controlling Snap Skipping

scroll-snap-stop controls whether certain scrolling operations may pass over an item’s snap position.

What it is and why to use it

scroll-snap-stop controls whether certain scrolling operations may pass over an item’s snap position. always is useful when a deliberate paged region should not skip over intermediate stops during a fling. It works with a scroll-snap container and does not create snapping by itself.

Common mistakes and limitations

Mandatory snapping can interfere with access to oversized content if designed poorly. Keep all content reachable by keyboard and touch. This property does not guarantee that every possible input operation advances exactly one item.

Try the example

The example pairs editable CSS with its own HTML preview. Run it, then change one declaration at a time and compare the result. Locally, put the CSS in a style element in the document head or in an external stylesheet linked from the HTML. Feature support varies by browser and version; use the linked reference and a useful fallback where needed.

HTML used by this example

<div class="strip"><section class="page">One</section><section class="page">Two</section><section class="page">Three</section></div>

Syntax

scroll-snap-stop: always;

Examples

Controlling Snap Skipping

Run the CSS against the supplied HTML, then experiment with the values.

.strip { display: flex; width: 18rem; max-width: 100%; overflow-x: auto; scroll-snap-type: x mandatory; }
.page { flex: 0 0 100%; scroll-snap-align: start; scroll-snap-stop: always; padding: 1rem; box-sizing: border-box; background: #dbeafe; color: #172b4d; }
  1. The horizontal strip establishes mandatory x-axis snapping.
  2. Each full-width page contributes a start-aligned snap position.
  3. always asks relevant scrolling operations to stop rather than pass over it. Compare a touch fling with normal snapping; not every navigation command behaves identically.
HTML used by this example
<div class="demo"><div class="strip"><section class="page">One</section><section class="page">Two</section><section class="page">Three</section></div></div>

Best practices

  • Mandatory snapping can interfere with access to oversized content if designed poorly. Keep all content reachable by keyboard and touch. This property does not guarantee that every possible input operation advances exactly one item.
  • Inspect the relevant browser reference and test the browsers used by your audience.

Runtime & versions

Web browsers. Feature availability depends on the language and runtime version used by your project; consult the official reference below.

CSS specifications (modules)

Specifications & further reading