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 |