CSS scroll-snap-type property
Description
CSS scroll-snap-type property specifies whether the container is scroll snap container, the axes to snap to, and strictness of snapping.
Syntax
scroll-snap-type : none | [ x | y | block | inline ] [ mandatory | proximity]
Property values
noneDefault
-
The scroll container does not snap.
scroll-snap-type: none;
x
-
The scroll container snaps to horizontal snap position.
scroll-snap-type: x;
y
-
The scroll container snaps to vertical snap position.
scroll-snap-type: y;
block
-
The scroll container must snap to block snap position (vertical).
scroll-snap-type: block;
inline
-
The scroll container must snap to block snap position (horizontal).
scroll-snap-type: inline;
mandatory
-
The container must snap to snap position on termination of scrolling.
scroll-snap-type: mandatory;
proximity
-
It means the scroll container may snap to snap position on termination of scrolling operation.
scroll-snap-type: proximity;
Applicable to
It applies to scroll containers.
From web4college, the free CSS digger
#CSS digger
Was this article helpful?