CSS Scroll Snap Points

The CSS scroll snap specification introduces snap points as a way to "enforce the scroll offsets that a scroll container's visual viewport may end at after a scrolling operation has completed". Scroll snapping applies to both user scroll operations such as touch, wheel scrolling, or scrollbar dragging, and programmatic scroll operations such as Element.scrollTo(). This improves the user experience by allowing scrollable zones to easily stop at predefined points.

Comments

As of June 2018: IE, Edge, and Firefox ship a deprecated version of the specification, Safari ships the current CR specification which is what Chrome implements as well. More info on different versions: https://gist.github.com/majido/9900261e1b7e2b1eb180b01c03656b42

Demo

• https://webdesign.tutsplus.com/tutorials/how-to-scroll-snap-using-css--cms-30333

Documentation

• https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Scroll_Snap_Points

Specification

Established standard

Status in Chromium

Blink components: Blink>Scroll

Enabled by default (tracking bug) in:

• Chrome for desktop release 69
• Chrome for Android release 69
• Android WebView release 69
• Opera release 56
• Opera for Android release 56

Consensus & Standardization

• Firefox: Shipped
• Edge: Shipped
• Safari: Shipped
• Web Developers: Positive

Owners

• majidvp@chromium.org
• sunyunjia@chromium.org

Last updated on 2018-07-19