scroll-snap-align

scroll-snap-align is part of the CSS Scroll Snap Module. Scroll snapping refers to “locking” the position of the viewport to specific elements on the page as the window (or a scrollable container) is scrolled. Think of a scroll-snapping container like putting a magnet on top of an element that sticks to the top of the viewport and forces the page to stop scrolling right there.

scroll-snap-align is a required property for a scroll-snapping element within a scroll-snapping container. For more information on scroll-snapping containers see the scroll-snap-type almanac entry. scroll-snap-align tells the browser which part of an element should be aligned when a snap point is encountered: Should the element snap to the start, center , or end of the parent container that contains the scroll-snap-type property?

If you want an element to snap into place at the start of that element, give it a scroll-snap-align value like so:

/* Assuming this element is a child of a container with `scroll-snap-type` set */
.element {
  scroll-snap-align: start;
}

Syntax

scroll-snap-align: [ none | start | end | center ]{1,2}

You can specify up to 2 values for this property, representing the block and inline axes, respectively. If you only give 1 value, that value will be used for both axes.

Values

scroll-snap-align accepts the following values:

• none disables scroll snapping on the element
• start aligns the element’s start with the scroll container’s snapport when snapped into place
• end aligns the element’s end with the scroll container’s snapport when snapped into place
• center aligns the element’s center with the scroll container’s snapport when snapped into place

Example

Browser Support

Related

• scroll-snap-type
• scroll-margin
• scroll-padding
• scroll-snap-stop

Resources

• CSS Scroll Snap W3C Candidate Recommendation
• Practical CSS Scroll Snapping
• Introducing CSS Scroll Snap Points