scroll-snap-align

Avatar of Andy Adams
Andy Adams on (Updated on )

📣 Freelancers, Developers, and Part-Time Agency Owners: Kickstart Your Own Digital Agency with UACADEMY Launch by UGURUS 📣

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

This browser support data is from Caniuse, which has more detail. A number indicates that browser supports the feature at that version and up.

Desktop

ChromeFirefoxIEEdgeSafari
696811*7911

Mobile / Tablet

Android ChromeAndroid FirefoxAndroidiOS Safari
12212312211.0-11.2

Resources