The scroll-snap-type CSS property is used to define the behavior of scroll snapping within a scroll container. It allows you to specify the snap points and the scrolling axis for which snap behavior should be applied.
The scroll-snap-type property accepts two values:
-
none: This is the default value. Scroll snapping behavior is not enabled. -
mandatory: Snap points are defined, and the container will always snap to these points during scrolling.
Here’s an example:
.scroll-container {
scroll-snap-type: y mandatory;
}
In this example, the .scroll-container class sets the scroll-snap-type property to y mandatory. This enables scroll snapping behavior on the vertical axis, and snap points are mandatory. The container will snap to the defined snap points as it is scrolled vertically.
You can also use the x value to enable scroll snapping on the horizontal axis:
.scroll-container {
scroll-snap-type: x mandatory;
}
In this example, scroll snapping is enabled on the horizontal axis, and the container will snap to the defined snap points as it is scrolled horizontally.
It’s important to note that in order for scroll snapping to work, you also need to define snap points using the scroll-snap-align property on the child elements of the scroll container.
The scroll-snap-type property is useful when you want to create scrollable sections or carousels that snap to specific positions. It provides a way to create more intuitive scrolling experiences and allows for precise positioning within the scroll container.