Make the nearest element snap in to center when the user stop scrolling:
div {
scroll-snap-align: center;
}
Try it Yourself »
Definition scroll-snap-align
Подработка: Перевод страницы
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 scroll-snap-align
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
scroll-snap-align: none|start|end|center|block inline|initial|inherit;
Property Values scroll-snap-align
| 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 scroll-snap-align
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;
}
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 scroll-snap-align
CSS scroll-snap-type property: CSS Scroll-snap-type property