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

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

Documentation

• https://developers.google.com/web/updates/2018/07/css-scroll-snap

Specification

Specification link

Status: Final published standard: Recommendation, Living Standard, Candidate Recommendation, or similar final form

Status in Chromium

Blink components: Blink>Scroll

Implementation status: Enabled by default (tracking bug)

Consensus & Standardization

• Firefox: In development
• Edge: Positive
• Safari: Shipped/Shipping
• Web Developers: Positive

Owners

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

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

Search tags

Last updated on 2020-11-19