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

Documentation

Specification

Established standard

Status in Chromium

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

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

  • Shipped
  • Shipped
  • Shipped
  • Positive

Owners

Last updated on 2018-07-19