CSS Scroll Snap
CSS Scroll Snap is a module of CSS that contains features to control panning and scrolling behavior with snap positions.
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.
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.
Properties on containers
Properties on children
|CSS Scroll Snap Module Level 1 |