Scroll Snap Reference
Core Properties
| Property | Values | Applied To |
|---|---|---|
scroll-snap-type | x|y|both + mandatory|proximity | Scroll container |
scroll-snap-align | start | center | end | none | Scroll children |
scroll-padding | px | rem | % (shorthand or per side) | Scroll container |
scroll-margin | px | rem | Scroll children |
scroll-snap-stop | normal | always | Scroll children |
overscroll-behavior | auto | contain | none | Scroll container |
Horizontal Scroll Snap (scroll below)
Vertical Scroll Snap
Code Example
/* Horizontal carousel */
.carousel {
display: flex;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-padding: 0 16px;
}
.carousel-item {
min-width: 80%;
scroll-snap-align: start;
scroll-snap-stop: always;
}
/* Vertical full-screen sections */
.sections {
height: 100vh;
overflow-y: scroll;
scroll-snap-type: y mandatory;
}
.section {
height: 100vh;
scroll-snap-align: start;
}