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.
Demo
Documentation
Specification
Status in Chromium
Enabled by default (tracking bug) in:
- Chrome for desktop release 69
- Chrome for Android release 69
- Android WebView release 69
Consensus & Standardization
After a feature ships in Chrome, the values listed here are not guaranteed to be up to date.
- In development
- Positive
- Shipped/Shipping
- Positive
Owners
Search tags
css, scrolling, snap points,Last updated on 2020-11-19
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