CSS scroll-snap-align Property
Make the nearest element snap in to center when the user stop scrolling:
More "Try it Yourself" examples below.
Definition and Usage
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.
|Animatable:||no. Read about animatable|
The numbers in the table specify the first browser version that fully supports the property.
|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|
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:
scroll-snap-align: none center;
Align snap at the start of elements, vertically
scroll-snap-align property can also be set at start of elements in the block direction, when scrolling vertically:
scroll-snap-align: start none;
CSS scroll-snap-type property: CSS Scroll-snap-type property