A CSS property you probably haven’t used yet. Scroll-snap.

The scroll-snap property in CSS is used to control the scrolling behavior of a container element, allowing it to snap to specific points or elements during scrolling. It is primarily used for creating smooth and precise scrolling experiences, especially in cases where content is organized in a horizontal or vertical layout, such as image carousels or slideshows.

The scroll-snap property can be applied to both the container element and its child elements. There are several sub-properties that can be used to define the scrolling behavior:

This sub-property specifies the snapping behavior of the container. It has two possible values:

• none: No snapping behavior is applied.
• mandatory: The container will always snap to the nearest snap point.
• proximity: The container will snap to the nearest snap point if the user’s scroll gesture is close enough to it.

This sub-property defines the alignment of the snap points within the container. It can have the following values:

• none: No alignment is applied.
• start: Snap points align to the start edge of the container.
• end: Snap points align to the end edge of the container.
• center: Snap points align to the center of the container.

This sub-property determines whether the scrolling should stop immediately after the snap point is reached. It can have the values:

• normal: Scrolling continues beyond the snap point.
• always: Scrolling stops abruptly at the snap point.

These sub-properties allow you to specify the scroll snapping behavior independently for the horizontal (x) and vertical (y) axes.

This sub-property defines a margin around the snap points, specifying the distance at which the container will snap to the nearest point. It can take values in pixels or percentages.