It makes the scrolling experience much smoother and it is very easy to implement.
.my-element {
scroll-snap-type: mandatory;
scroll-snap-points-x: repeat(50px, 100px);
}
This code will create an element that snaps to every 50px on the x-axis and every 100px on the y-axis.
Scroll snap align: The new scroll-snap-align property allows you to control how an element is aligned when it snaps to a snap position. For example, you can use this property to ensure that an element is always aligned to the top, bottom, center, or left/right of the scroll container. Also in the example below, you can see that there is support for scroll snap in both axes.
.container {
overflow-x: scroll;
overflow-y: scroll;
scroll-snap-type: both mandatory; // Support both axes
scroll-snap-align: center;
}
Better support for touch devices: making it easier to snap to snap positions using touch gestures.
.container {
scroll-snap-type: both mandatory;
scroll-snap-touch-snap-points: true;
}