CSS Scroll Snap

CSS Scroll Snap is a module of CSS that contains features to control panning and scrolling behavior with snap positions.

Key concepts

CSS scroll snap enables snapping content as the user scrolls overflowing content within a scroll container. Scroll snap introduces scroll snap positions, which enforce the scroll positions that a scroll container's scrollport may end at after a scrolling operation has completed.

To enable scroll snapping, the scrolling behavior is defined on the scroll container. The container's scroll-snap-type property defines whether the scrollable viewport can be snapped to, the axis upon which the snapping occurs, and whether snapping is required or optional. To enable scrolling, the container should have a defined size and overflow must be enabled. There are optional scroll-padding properties that can be set on the scroll container to create a snapping offset.

The scroll-snap-align property is set on every child of the scroll container, defining each child's snap position or lack thereof. The scroll-snap-stop property enables requiring that child is snapped to during scrolling and not passed over. There are several scroll-margin properties that can be set on the snapped-to child elements to create an outset from the defined box.

Reference

Properties on containers

Properties on children

Glossary terms

Guides

Specifications

Specification
CSS Scroll Snap Module Level 1

See also