Scroll Snap Stop

Category: CSS
Type: New or changed feature
Status: Enabled by default (Chrome 75)
Intent stage: Evaluate readiness to ship

Summary

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.

Standards & signals

Specification: https://drafts.csswg.org/css-scroll-snap/#scroll-snap-stop
Firefox: Shipped/Shipping — https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/103#css
Safari: Shipped/Shipping — https://webkit.org/blog/11555/release-notes-for-safari-technology-preview-121/ https://webkit.org/blog/11648/new-webkit-features-in-safari-14-1/
Web developers: Positive — Several developers (e.g., comments on crbug [1], AirBnb [2], AMP[3]) have requested this. A particular popular usecase is to create full-size image carousels that only snap to the next image (e.g., similar to native mobile apps). Normally a fling gesture snaps to the closest area near its "natural end point" which is not the right behavior in such usecases. [1] https://bugs.chromium.org/p/chromium/issues/detail?id=823998#c3 [2] https://bugs.chromium.org/p/chromium/issues/detail?id=920482#c17 [3] https://bugs.chromium.org/p/chromium/issues/detail?id=920482#c1
Tracking bug: https://bugs.chromium.org/p/chromium/issues/detail?id=823998

Docs: https://snap.glitch.me/carousel-with-snap-stop.html

Explainers: https://drafts.csswg.org/css-scroll-snap/#scroll-snap-stop

View on chromestatus.com