Snap scroll position to sections or cards. Smooth carousel and full-page scroll.
/* Parent: enable snap */
.slider {
overflow-x: auto;
scroll-snap-type: x mandatory;
display: flex;
gap: 1rem;
}
/* Children: snap points */
.slider > * {
scroll-snap-align: start;
scroll-snap-stop: always;
flex: 0 0 80%;
}
/* Optional: smooth scroll */
.slider {
scroll-behavior: smooth;
}
/* Vertical full-page sections */
.sections {
scroll-snap-type: y mandatory;
overflow-y: scroll;
height: 100vh;
}
.sections > section {
scroll-snap-align: start;
min-height: 100vh;
}Set scroll-snap-type: x mandatory (horizontal) or y mandatory (vertical) on the scroll container. Use overflow auto/scroll.
Set scroll-snap-align: start, center, or end on each snap target. scroll-snap-stop: always keeps one item per snap.
scroll-snap-align: center;