Interaction
scroll-snap-align
scroll-snap-align sets which part of an element lines up with which part of a snapping scroll box when scrolling stops. With start, the start of the element lines up with the start of the box.
Syntax
[ none | start | end | center ]{1,2}Preview
Code
.box {
overflow: auto;
scroll-snap-type: y mandatory;
}
.box > :nth-child(2) {
scroll-snap-align: start;
}Controls
About
What the values mean
none: the initial value. The box does not snap to this element.start: lines up the start of the element (the top, vertically in horizontal text) with the start of the box.end: lines up the end of the element (the bottom, vertically in horizontal text) with the end of the box.center: lines up the middle of the element with the middle of the box.
With two values, the first is for the block axis (vertical in horizontal text) and the second for the inline axis (horizontal in horizontal text). With one value, both axes use it.
The preview is a box that scrolls vertically with scroll-snap-type: y mandatory, and the property is set on the second of three cards. With start the second card lines up with the top of the box, with end with the bottom, and with none nothing snaps, so the first card shows.
When to use it
Set it on each card of a carousel or each full-screen section, so that they line up neatly when scrolling stops.
Watch out
- It has no effect unless the scrolling parent box has
scroll-snap-type. The snapping direction is set there too. - To line up a little away from the edge of the box, add
scroll-paddingto the box orscroll-marginto the element. - When the element is larger than the box, you can scroll freely inside it while it covers the box, even with
mandatory.