CSS scroll-snap-align Property
Example
Make the nearest element snap in to center when the user stop scrolling:
div {
scroll-snap-align: center;
}
Try it Yourself »
More "Try it Yourself" examples below.
Definition and Usage
The scroll-snap-align property specifies
where elements will snap into focus when you stop scrolling.
To acheive scroll snap behaviour, the scroll-snap-align property must be set on the child elements, and the scroll-snap-type property must be set on the parent element.
| Default value: | none |
|---|---|
| Inherited: | no |
| Animatable: | no. Read about animatable |
| Version: | CSS3 |
| JavaScript syntax: | object.style.scrollSnapAlign="start" Try it |
Browser Support
The numbers in the table specify the first browser version that fully supports the property.
| Property | |||||
|---|---|---|---|---|---|
| scroll-snap-align | 69.0 | 79.0 | 68.0 | 11.0 | 56.0 |
CSS Syntax
scroll-snap-align: none|start|end|center|block inline|initial|inherit;
Property Values
| Value | Description |
|---|---|
| none | No scroll snap effect. This is default |
| start | Scroll snap at start of elements on x- and y-axis. |
| end | Scroll snap at end of elements on x- and y-axis. |
| center | Scroll snap at center of elements on x- and y-axis. |
| block inline | Two value syntax. First value is how to snap in block direction, and second value is how to snap in the inline direction. |
| initial | Sets this property to its default value. Read about initial |
| inherit | Inherits this property from its parent element. Read about inherit |
More Examples
Image gallery
The scroll-snap-align property is good for scrolling through an image gallery. Here, scroll direction is horizontal, and snap alignment is center. When the user lets go of the scroll bar, the nearest image will snap in to the middle of the scrollable area. Try to click on an image, then use right or left arrow keys to scroll through them:
#container > img {
scroll-snap-align: none center;
}
Align snap at the start of elements, vertically
The scroll-snap-align property can also be set at start of elements in the block direction, when scrolling vertically:
#container > div {
scroll-snap-align: start none;
}
Related Pages
CSS scroll-snap-type property: CSS Scroll-snap-type property
