CSS Scroll Snap

CSS Scroll Snap is a module of CSS that introduces scroll snap positions, which enforce the scroll positions that a scroll container’s scrollport may end at after a scrolling operation has completed.

Reference

CSS Properties on Containers

scroll-snap-type
scroll-padding
scroll-padding-top
scroll-padding-right
scroll-padding-bottom
scroll-padding-left
scroll-padding-inline
scroll-padding-inline-start
scroll-padding-inline-end
scroll-padding-block
scroll-padding-block-start
scroll-padding-block-end

CSS Properties on Children

scroll-snap-align
scroll-margin
scroll-margin-top
scroll-margin-right
scroll-margin-bottom
scroll-margin-left
scroll-margin-inline
scroll-margin-inline-start
scroll-margin-inline-end
scroll-margin-block
scroll-margin-block-start
scroll-margin-block-end
scroll-snap-stop

Guides

Basic concepts of CSS Scroll Snap
Browser Compatibility and Scroll Snap

Specifications

Specification	Status	Comment
CSS Scroll Snap Module Level 1	Candidate Recommendation	Initial definition

Browser compatibility

The individual property pages detail browser compatibility information for each property.

Note: The previous version of this module was called Scroll Snap Points and has been deprecated. CSS Scroll Snap is the current implementation. Read the guide to browser compatibility for an overview of how to support both the old and new specification.