Control snap alignment with scroll-snap-align (start, center, end)
Understand mandatory vs proximity snap strictness
Create horizontal carousels and vertical section scrolling
Force sequential viewing with scroll-snap-stop
Build image galleries, card carousels, and full-page scrolling
Combine scroll-snap with scroll-padding for perfect positioning
Introduction to Scroll Snap
CSS Scroll Snap provides native carousel and gallery functionality without JavaScript. Create smooth, touch-friendly scrolling interfaces that automatically snap to specific scroll positions - perfect for image galleries, product showcases, and full-page presentations.
Scroll snap is performant, touch-optimized, and works seamlessly with native scrolling physics. Users can swipe or scroll naturally, and the content snaps into place when they release.
scroll-snap-type: Enable Snap Scrolling
Apply scroll-snap-type to a scroll container to enable snap behavior. Specify the axis (x, y, or both) and strictness (mandatory or proximity).
/* Horizontal carousel - always snaps */
.carousel {
scroll-snap-type: x mandatory;
display: flex;
overflow-x: auto;
gap: 1rem;
}
/* Vertical sections - always snaps */
.fullpage {
scroll-snap-type: y mandatory;
overflow-y: auto;
height: 100vh;
}
/* Gentle snapping - only when close */
.gallery {
scroll-snap-type: x proximity;
}
/* Snap both directions */
.grid {
scroll-snap-type: both mandatory;
}
scroll-snap-align: Snap Position
Apply scroll-snap-align to child elements to define where they should align within the container when snapped.
/* Snap to start (left edge for horizontal) */
.item {
scroll-snap-align: start;
flex: 0 0 300px;
}
/* Snap to center (most common for galleries) */
.gallery-item {
scroll-snap-align: center;
flex: 0 0 90%;
}
/* Snap to end (right edge for horizontal) */
.card {
scroll-snap-align: end;
}
/* No snapping for specific items */
.no-snap {
scroll-snap-align: none;
}
Choosing the Right Alignment
/* Use start for: */
.list-items {
scroll-snap-align: start;
/* Cards, lists, sections where alignment to the left/top makes sense */
}
/* Use center for: */
.featured-images {
scroll-snap-align: center;
/* Image galleries, hero carousels, featured content */
}
/* Use end for: */
.timeline-events {
scroll-snap-align: end;
/* Timeline layouts, right-aligned content */
}
Horizontal Carousels
Create horizontal scrolling carousels for images, cards, or products with just a few lines of CSS.
Use scroll-padding with scroll snap to account for fixed headers or create custom spacing around snapped elements.
/* Add padding for fixed header */
.scroll-container {
scroll-snap-type: y mandatory;
scroll-padding-top: 80px; /* Height of fixed header */
overflow-y: auto;
}
/* Horizontal padding for peek effect */
.horizontal-scroll {
scroll-snap-type: x mandatory;
scroll-padding-inline: 5%; /* Space on left and right */
overflow-x: auto;
}