CSS scroll-snap-align Property

The scroll-snap-align property tells the browser which point on an element should be lined up with the scroll container’s snapport when a snapping action occurs. It is applied to the snap candidates (typically the children of a scroll container) and does not change the element’s layout or positioning — it only defines how the element should be aligned relative to the container when the container settles on a snap position. Because it targets the snap point of an element rather than altering flow, you can use it on static, relatively positioned, or transformed elements without affecting their normal placement until a snap happens.

For snapping to work, the container must have snapping turned on; the container’s snapping behavior and axis/strength determine how and when elements with scroll-snap-align are considered. If multiple candidates are close to the snapport at the end of a scroll, the user agent chooses which one to snap to based on proximity and the container’s configured snapping rules. You can control how the container behaves and which axes are involved via scroll-snap-type, and you can affect the effective snap area by using scroll-padding on the container or adjusting each item’s snap offset with scroll-margin on the items themselves.

Practically, scroll-snap-align is often used to create carousels, full-page sections, or horizontally paged lists where each item should come into a predictable position after a flick or programmatic scroll. It works with logical axes, so it respects writing-mode and direction; an alignment that looks like “start” or “end” will map to the appropriate physical edge in vertical writing modes or right-to-left contexts. It also cooperates with scroll behavior settings — for example, programmatic scrolling that requests smooth scrolling will still snap according to the defined snap alignment and the container’s behavior (scroll-behavior).

When designing with this property, it’s usually best to set snap alignment on the direct children you intend to be candidates, keep the alignments consistent for uniform paging, and adjust container padding or item margins to fine-tune visual spacing. Remember that snapping is a final-step adjustment to the scrolling position: it won’t prevent intermediate scrolling positions or change how touch momentum is handled, but it will determine the target position where the scroller comes to rest.