Interaction
scroll-snap-type
scroll-snap-type sets whether a scrolling box snaps to the position of an element inside it when scrolling stops. You give the direction and the strictness.
Syntax
none | [ x | y | block | inline | both ] [ mandatory | proximity ]?Preview
123
Presets
Drag the bottom-right corner to resize
Code
.box {
overflow: auto;
scroll-snap-type: y mandatory;
}
.box > :nth-child(2) {
scroll-snap-align: center;
}Controls
scroll-snap-typey mandatory
Strictness
123
About
What the values mean
none: the initial value. No snapping.x/y: snaps when scrolling horizontally / vertically.block/inlinefollow the flow of text, so they are vertical / horizontal in horizontal text.bothcovers both directions.mandatory: whenever scrolling stops, it rests at one of the snap positions.proximity: snaps only when scrolling stops near a snap position. The browser decides how near is near enough. This is used when the strictness is left out.
The snap positions come from scroll-snap-align on the elements inside. The preview stacks three cards vertically and sets scroll-snap-align: center on the second one only. With y mandatory the second card returns to the middle whenever you scroll, and with y proximity it snaps only when you scroll close to it.
When to use it
Use it to make scrolling stop at sensible places, such as a horizontal photo carousel or vertical sections that switch one screen at a time.
Watch out
- Set it on the scrolling box (with
overflowset toauto,scroll, orhidden). For page scrolling, set it onhtml, notbody. - Nothing happens unless some element inside has
scroll-snap-align. - With
mandatory, if the content between two snap positions is longer than the box, scrolling cannot stop partway and some of it cannot be read (the preview has only one snap position, so you cannot scroll to the outer ends of the first and third cards). Useproximitywhen the length of the content is not fixed.