CSS scroll-snap-align

The scroll-snap-align property is a CSS property that defines the alignment of the snap scroll position when scrolling inside a container element. This property is used in conjunction with the scroll-snap-type property to create smooth scrolling behavior for elements inside a scrollable container.

The scroll-snap-align property can take the following values:

none: The element does not snap to a specific position when scrolling.
start: The element snaps to the start of the scroll container.
center: The element snaps to the center of the scroll container.
end: The element snaps to the end of the scroll container.

Let's see an example of how to use the scroll-snap-align property in CSS:

Result:

Item 1

Item 2

Item 3

Item 4

Item 5

In this example, we have a scrollable container with five scroll items. Each scroll item has the scroll-snap-align: center; property applied, which means that the items will snap to the center of the scroll container when scrolling.