Scroll Snap Stop

CSS

Normally an inertial scroll operation (such as a swipe gesture) may skip several possible snap positions in favor of a snap position that is closer to its natural end point (which depends on platform and gesture characteristics such as velocity). scroll-snap-stop enables authors to designate a snap position such that it traps the inertial scrolling operations preventing the scroll from skipping it.

Motivation

Some forms of paginated scrolling experiences require user scroll gesture to move at most a single page. A common example of this are full-sized paginated image carousels where they move one image at the time. This feature enables css scroll snap to support such usecases.

Documentation

Specification

Established standard

Status in Chromium

Blink>Scroll


Enabled by default (tracking bug) in:

  • Chrome for desktop release 75
  • Chrome for Android release 75
  • Android WebView release 75

Consensus & Standardization

After a feature ships in Chrome, the values listed here are not guaranteed to be up to date.

  • No signal
  • No signal
  • No signal
  • Positive

Owner

Search tags

scroll snap carousel css,

Last updated on 2020-10-15