CSS scroll-snap-type Property
Set scroll snap functionality on the x-axis.
scroll-snap-type: x mandatory;
More "Try it Yourself" examples below.
Definition and Usage
scroll-snap-type specifies how the elements will snap into focus when you stop scrolling, and in what direction.
To acheive scroll snap behaviour, the
scroll-snap-type property must be set on the parent element, and the
scroll-snap-align property must be set on the child elements.
|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|
|x||Scroll snap effect is set on x-axis|
|y||Scroll snap effect is set on y-axis|
|block||Scroll snap effect is set on block direction|
|inline||Scroll snap effect is set on inline direction|
|both||Scroll snap effect is set on both x- and y-axis|
|mandatory||Scroll will automatically move to snap point after scroll action is finished|
|proximity||Similar to mandatory, but not as strict. Scroll will automatically move to snap point after scroll action is finished, but inbetween snap points there is an area without the snap effect. Depends on browser parameters.|
|initial||Sets this property to its default value. Read about initial|
|inherit||Inherits this property from its parent element. Read about inherit|
Snap behaviour in both directions
scroll-snap-type property is set on both x- and y-axis:
scroll-snap-type: both mandatory;
Snap behaviour with proximity
scroll-snap-type property is set on both x- and y-axis with proximity behaviour. With this property value, if scrolling action stops right in the middle of two elements there is no snap:
scroll-snap-type: both proximity;
CSS scroll-snap-align property: CSS Scroll-snap-align property