CSS scroll-snap-type Property
Example
Set scroll snap functionality on the x-axis.
#container {
scroll-snap-type: x mandatory;
}
Try it Yourself »
More "Try it Yourself" examples below.
Definition and Usage
The 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.
| Default value: | none |
|---|---|
| Inherited: | no |
| Animatable: | no. Read about animatable |
| Version: | CSS3 |
| JavaScript syntax: | object.style.scrollSnapType="x mandatory" Try it |
Browser Support
The numbers in the table specify the first browser version that fully supports the property.
| Property | |||||
|---|---|---|---|---|---|
| scroll-snap-type | 69.0 | 79.0 | 99.0 | 11.0 | 56.0 |
CSS Syntax
scroll-snap-type: none|x|y|block|inline|both|mandatory|proximity|initial|inherit;
Property Values
| Value | Description |
|---|---|
| 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 |
More Examples
Snap behaviour in both directions
The scroll-snap-type property is set on both x- and y-axis:
#container > div {
scroll-snap-type: both mandatory;
}
Snap behaviour with proximity
The 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:
#container > div {
scroll-snap-type: both proximity;
}
Related Pages
CSS scroll-snap-align property: CSS Scroll-snap-align property