Set scroll snap functionality on the x-axis.
#container {
scroll-snap-type: x mandatory;
}
Try it Yourself »
Definition scroll-snap-type
Подработка: Перевод страницы
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 scroll-snap-type
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
scroll-snap-type: none|x|y|block|inline|both|mandatory|proximity|initial|inherit;
Property Values scroll-snap-type
| 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 scroll-snap-type
The scroll-snap-type property is set on both x- and y-axis:
#container > div {
scroll-snap-type: both mandatory;
}
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 scroll-snap-type
CSS scroll-snap-align property: CSS Scroll-snap-align property