Understanding CSS Scroll Snap
CSS Scroll Snap is a native CSS module that gives developers fine-grained control over how a scrollable container's scrolling behavior settles after the user finishes scrolling. Instead of letting momentum carry the viewport to an arbitrary position, Scroll Snap defines snap positions — predetermined stopping points — so that the container elegantly locks into place, aligning content exactly where you want it. Think of it as building a native carousel, gallery, or page-by-page reading experience without a single line of JavaScript.
The specification introduces a set of properties that work together: the container declares its snapping axis and strictness, while each child element declares how it should align when snapped into view. This declarative approach keeps your logic clean, performant, and tightly integrated with the browser's rendering pipeline.
The Two Core Ingredients
Scroll snapping requires exactly two things to work: a snap container and snap items. The container is any element with overflow: auto (or overflow: scroll) that also has a scroll-snap-type value. Its direct children then become eligible snap targets when they carry the scroll-snap-align property. No nesting of intermediate wrappers — the children must be immediate descendants of the container to participate.
Why Scroll Snap Matters
🚀 Deploy your AI agent in 10 minutes
Managed Hermes hosting. Zero DevOps. 100M tokens/mo included.
Try it free →Before CSS Scroll Snap, creating a snapping scroll experience meant reaching for JavaScript libraries like Swiper, Slick, or implementing custom touch-event handlers. These solutions often suffer from janky momentum calculations, inconsistent behavior across input methods (touch vs. trackpad vs. mouse wheel), and bundle-size bloat. CSS Scroll Snap solves these problems at the platform level:
- Native performance: The browser handles snapping on its compositor thread, offloading work from the main JavaScript thread. This means buttery-smooth 60fps snapping even during heavy page activity.
- Input agnosticism: Whether the user swipes on a phone, flicks a trackpad, spins a mouse wheel, or taps a keyboard arrow, the snapping behavior remains consistent because the browser normalizes all input types.
- Zero dependencies: You ship exactly zero kilobytes of JavaScript. The entire feature lives in your stylesheet.
- Accessibility wins: Because the DOM structure remains unchanged, screen readers and focus management work naturally. Users can tab through snap items without the disorientation caused by JS-driven position resets.
- Resilience: If CSS fails to parse or the browser doesn't support it, the container gracefully degrades to normal scrolling — your content remains fully accessible.
Core Properties In Depth
scroll-snap-type — Defining the Container's Behavior
Set on the scroll container, this property accepts two keywords: the axis and the strictness.
Axis values:
x— Snapping along the horizontal axis only.y— Snapping along the vertical axis only.both— Snapping on both axes simultaneously (useful for grid-like layouts).block/inline— Logical axis values that respect writing mode and direction.
Strictness values:
mandatory— The browser must snap to a position. If no snap point is in range, it forces the closest one. This is great for controlled experiences like onboarding flows but can trap users if content is longer than expected.proximity— The browser snaps only if the scroll naturally ends near a snap point. This feels more like a gentle suggestion, preserving user freedom. Ideal for general-purpose galleries where you want to enhance — not override — scrolling.
scroll-snap-align — Positioning Snap Items
Set on each child of the container, this property tells the browser which part of the child should align with which part of the container's scrollport. It accepts values for both axes (block and inline):
start— The child's start edge aligns with the container's start edge.center— The child's center aligns with the container's center.end— The child's end edge aligns with the container's end edge.
You can specify one value (applied to both axes) or two values separated by a space: scroll-snap-align: start center sets block-axis alignment to start and inline-axis to center.
scroll-snap-stop — Preventing Overscrolling
By default (normal), a fast scroll can skip past multiple snap points. Setting scroll-snap-stop: always on a child forces the browser to stop at that item regardless of scroll velocity. This is powerful for creating mandatory waypoints but should be used sparingly — it can make scrolling feel sluggish if applied to every item.
scroll-padding and scroll-margin — Offsetting Snap Positions
These properties are crucial for real-world layouts. scroll-padding (set on the container) defines an inset from the scrollport's edges where snapping should occur — perfect for accommodating fixed headers or sidebars. scroll-margin (set on snap items) pushes the snap position outward from the item's edge, useful for spacing items apart or accounting for overlapping UI elements.
Practical Code Examples
Example 1: Basic Horizontal Carousel
A classic image carousel with mandatory snapping on the x-axis. Each slide occupies the full width of the container, creating a page-by-page scrolling experience.
<style>
.carousel {
overflow-x: auto;
scroll-snap-type: x mandatory;
display: flex;
/* Each child will be full-width */
width: 100%;
}
.carousel::-webkit-scrollbar {
display: none; /* Hide scrollbar for cleaner look */
}
.slide {
scroll-snap-align: start;
flex: 0 0 100%;
height: 400px;
display: flex;
align-items: center;
justify-content: center;
font-size: 3rem;
color: white;
}
.slide:nth-child(1) { background: #e74c3c; }
.slide:nth-child(2) { background: #2ecc71; }
.slide:nth-child(3) { background: #3498db; }
.slide:nth-child(4) { background: #9b59b6; }
</style>
<div class="carousel">
<div class="slide">Slide 1</div>
<div class="slide">Slide 2</div>
<div class="slide">Slide 3</div>
<div class="slide">Slide 4</div>
</div>Here, scroll-snap-type: x mandatory on the container and scroll-snap-align: start on each slide guarantee that after any scroll, a slide's left edge perfectly aligns with the container's left edge. The flex: 0 0 100% ensures each slide takes exactly the container's width.
Example 2: Vertical Snap with Proximity
For long-form content like a storytelling page, vertical snapping with proximity allows sections to gently settle into view without trapping the user.
<style>
.story-container {
overflow-y: auto;
scroll-snap-type: y proximity;
height: 100vh;
scroll-padding-top: 80px; /* Account for fixed header */
}
.story-section {
scroll-snap-align: start;
min-height: 60vh;
padding: 2rem;
border-bottom: 1px solid #eee;
}
.story-section h2 {
margin-top: 0;
}
</style>
<div class="story-container">
<section class="story-section">
<h2>Chapter One: The Beginning</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
</section>
<section class="story-section">
<h2>Chapter Two: The Journey</h2>
<p>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua...</p>
</section>
<section class="story-section">
<h2>Chapter Three: The Resolution</h2>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco...</p>
</section>
</div>With proximity, if the user scrolls just a few pixels past a section boundary, the browser won't force a snap — it respects the user's intent. The scroll-padding-top: 80px ensures that sections snap to a position 80px below the top, leaving room for a fixed navigation bar.
Example 3: Centered Gallery with Peek-a-Boo Effect
A horizontally scrolling gallery where the active item snaps to center, and adjacent items peek in from the sides — a popular pattern for product showcases.
<style>
.gallery {
overflow-x: auto;
scroll-snap-type: x mandatory;
display: flex;
gap: 16px;
padding: 0 calc(50% - 150px); /* Peek-a-boo spacing */
scroll-padding-left: calc(50% - 150px);
scroll-padding-right: calc(50% - 150px);
}
.gallery-card {
scroll-snap-align: center;
flex: 0 0 300px;
height: 350px;
border-radius: 12px;
background: linear-gradient(135deg, #667eea, #764ba2);
color: white;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: 1.5rem;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.gallery-card:hover {
transform: scale(1.03);
box-shadow: 0 20px 40px rgba(0,0,0,0.3);
}
</style>
<div class="gallery">
<div class="gallery-card">🌟 Product A</div>
<div class="gallery-card">🚀 Product B</div>
<div class="gallery-card">💎 Product C</div>
<div class="gallery-card">🔥 Product D</div>
<div class="gallery-card">✨ Product E</div>
</div>The magic lies in the padding and scroll-padding values. By setting left/right padding to calc(50% - 150px) (half the viewport minus half a card width), the container naturally centers the snapped card while revealing adjacent cards on the sides. scroll-snap-align: center on each card completes the effect.
Example 4: Two-Axis Snapping Grid
For a full-screen image explorer where both horizontal and vertical axes snap, creating a grid of snap points.
<style>
.grid-explorer {
overflow: auto;
scroll-snap-type: both mandatory;
display: grid;
grid-template-columns: repeat(4, 100vw);
grid-template-rows: repeat(3, 100vh);
width: 100vw;
height: 100vh;
}
.grid-cell {
scroll-snap-align: start;
display: flex;
align-items: center;
justify-content: center;
font-size: 4rem;
font-weight: bold;
color: white;
}
.grid-cell:nth-child(1) { background: #1abc9c; }
.grid-cell:nth-child(2) { background: #2ecc71; }
.grid-cell:nth-child(3) { background: #3498db; }
.grid-cell:nth-child(4) { background: #9b59b6; }
.grid-cell:nth-child(5) { background: #e74c3c; }
.grid-cell:nth-child(6) { background: #f39c12; }
.grid-cell:nth-child(7) { background: #d35400; }
.grid-cell:nth-child(8) { background: #c0392b; }
.grid-cell:nth-child(9) { background: #16a085; }
.grid-cell:nth-child(10) { background: #27ae60; }
.grid-cell:nth-child(11) { background: #2980b9; }
.grid-cell:nth-child(12) { background: #8e44ad; }
</style>
<div class="grid-explorer">
<div class="grid-cell">A1</div>
<div class="grid-cell">A2</div>
<div class="grid-cell">A3</div>
<div class="grid-cell">A4</div>
<div class="grid-cell">B1</div>
<div class="grid-cell">B2</div>
<div class="grid-cell">B3</div>
<div class="grid-cell">B4</div>
<div class="grid-cell">C1</div>
<div class="grid-cell">C2</div>
<div class="grid-cell">C3</div>
<div class="grid-cell">C4</div>
</div>With scroll-snap-type: both mandatory, the browser snaps on both axes simultaneously. Each cell is sized to 100vw × 100vh, and the grid creates a 4×3 layout. Users can navigate this virtual space freely, always landing perfectly on a cell.
Example 5: Scroll Snap with Navigation Dots (Pure CSS + Minimal JS)
Combining scroll snapping with a JavaScript observer to update navigation indicators — the best of both worlds.
<style>
.showcase-wrapper {
position: relative;
width: 100%;
max-width: 800px;
margin: 0 auto;
}
.showcase {
overflow-x: auto;
scroll-snap-type: x mandatory;
display: flex;
scroll-behavior: smooth;
}
.showcase::-webkit-scrollbar {
display: none;
}
.showcase-item {
scroll-snap-align: start;
flex: 0 0 100%;
height: 450px;
background-size: cover;
background-position: center;
border-radius: 8px;
position: relative;
}
.nav-dots {
display: flex;
justify-content: center;
gap: 10px;
margin-top: 16px;
}
.nav-dot {
width: 12px;
height: 12px;
border-radius: 50%;
background: #ccc;
cursor: pointer;
transition: background 0.3s ease, transform 0.3s ease;
border: none;
padding: 0;
}
.nav-dot.active {
background: #333;
transform: scale(1.3);
}
</style>
<div class="showcase-wrapper">
<div class="showcase" id="showcase">
<div class="showcase-item" style="background-image: url('img1.jpg');"></div>
<div class="showcase-item" style="background-image: url('img2.jpg');"></div>
<div class="showcase-item" style="background-image: url('img3.jpg');"></div>
<div class="showcase-item" style="background-image: url('img4.jpg');"></div>
</div>
<div class="nav-dots" id="nav-dots">
<button class="nav-dot active" data-index="0"></button>
<button class="nav-dot" data-index="1"></button>
<button class="nav-dot" data-index="2"></button>
<button class="nav-dot" data-index="3"></button>
</div>
</div>
<script>
const showcase = document.getElementById('showcase');
const dots = document.querySelectorAll('.nav-dot');
const items = document.querySelectorAll('.showcase-item');
// Update active dot based on scroll position
showcase.addEventListener('scroll', () => {
const scrollLeft = showcase.scrollLeft;
const itemWidth = showcase.clientWidth;
const activeIndex = Math.round(scrollLeft / itemWidth);
dots.forEach((dot, i) => {
dot.classList.toggle('active', i === activeIndex);
});
});
// Click dot to navigate
dots.forEach(dot => {
dot.addEventListener('click', () => {
const index = parseInt(dot.dataset.index);
showcase.scrollTo({
left: index * showcase.clientWidth,
behavior: 'smooth'
});
});
});
</script>This example pairs CSS scroll snapping with a lightweight JavaScript layer for navigation dots. The scroll-behavior: smooth on the container ensures programmatic scrolls are animated. The Math.round(scrollLeft / itemWidth) calculation reliably detects the active index because mandatory snapping guarantees the scroll position aligns exactly with item boundaries.
Best Practices and Tips
1. Choose Strictness Wisely
Use mandatory only when you genuinely need to constrain the user's scrolling — image carousels, onboarding wizards, full-page presentations. For anything where users might want to scroll freely (product lists, article feeds), use proximity. Mandatory snapping can create accessibility barriers by preventing users from seeing content that falls between snap points if the content is longer than expected.
2. Always Account for Fixed UI Elements
If your layout has a fixed header, sidebar, or any overlapping chrome, use scroll-padding on the container to offset the snap region. Forgetting this is the most common cause of "snapped content hidden behind the header" bugs.
.container {
scroll-snap-type: y proximity;
scroll-padding-top: 60px; /* Height of your fixed header */
}3. Size Snap Items Correctly
Snap items should have consistent, predictable dimensions. In a horizontal carousel, each item should ideally match the container's width. Use flex: 0 0 100% or explicit widths. If items vary wildly in size, the snapping experience becomes erratic and disorienting.
4. Combine with scroll-behavior: smooth
Adding scroll-behavior: smooth to the container enhances programmatic navigation (like clicking a "next" button) with smooth animated scrolling. It doesn't affect user-initiated scrolling but makes JavaScript-driven scrollTo calls feel polished.
5. Test Across Input Methods
Trackpad inertial scrolling, touch swipes, mouse wheel clicks, and keyboard arrow keys all interact differently with snap points. Always test your implementation across these input modalities. Safari on iOS, in particular, has nuanced behavior with proximity snapping — sometimes requiring a more deliberate "throw" to trigger a snap.
6. Use scroll-snap-stop: always Sparingly
Applying scroll-snap-stop: always to every item makes scrolling feel heavy and resistant. Reserve it for critical waypoints — perhaps the first item in a long carousel or a "table of contents" marker in a lengthy document.
7. Provide Fallback Navigation
Even with perfect snapping, not all users interact with scroll-based navigation intuitively. Provide complementary controls: arrow buttons, dot indicators, or a visible table of contents. These controls can use element.scrollTo() to programmatically move the container while respecting snap points.
8. Mind the Scrollbar
Hiding the scrollbar (via ::-webkit-scrollbar { display: none; } or similar) creates a cleaner aesthetic but removes a crucial affordance. Consider showing a custom scroll indicator or ensuring the scrollable area is obvious through design cues like peeking adjacent items or gradient fades at the edges.
9. Respect Reduced Motion
Users who prefer reduced motion may find snapping jarring. Wrap your scroll-snap styles in a media query to disable it for those users:
@media (prefers-reduced-motion: reduce) {
.snap-container {
scroll-snap-type: none;
scroll-behavior: auto;
}
}10. Avoid Nesting Snap Containers
Nesting a horizontal snap container inside a vertical snap container creates confusing, competing snap interactions. The browser will struggle to resolve which axis to prioritize. If you need nested snapping, carefully test and consider restructuring your layout to avoid the conflict.
Common Pitfalls and How to Debug Them
Pitfall: Snapping Not Working at All
Cause: The most frequent culprit is that the container lacks overflow: auto or overflow: scroll in the correct axis. A container set to overflow: hidden cannot scroll and therefore cannot snap. Also, check that snap items are direct children — an intermediate wrapper div will break the snapping relationship.
Fix: Ensure the container has explicit overflow in the snapping axis and that snap items are immediate children.
/* Wrong */
.wrapper { overflow: hidden; } /* No scrolling possible */
/* Correct */
.wrapper { overflow-x: auto; scroll-snap-type: x mandatory; }Pitfall: Items Snap to Wrong Position
Cause: Missing or incorrect scroll-padding on the container when fixed elements overlay the scrollport. The snap position calculates from the scrollport's edge, which may be behind your header.
Fix: Add scroll-padding matching the offset of your fixed elements.
Pitfall: Browser Inconsistency
Different browsers have slightly different snapping physics — especially around momentum and when proximity decides to "grab" a snap point. Chrome and Firefox are largely aligned, but Safari can feel more aggressive with proximity. Always test across browsers and consider providing slightly larger snap targets (wider items) to reduce ambiguity.
Conclusion
CSS Scroll Snap transforms scrollable containers from passive regions into intentional, guided experiences — all within the stylesheet. By understanding the interplay between scroll-snap-type, scroll-snap-align, and the supporting offset properties, you can build carousels, galleries, and paginated layouts that feel native, perform flawlessly, and degrade gracefully. The key takeaways are: choose proximity for freedom and mandatory for control, always offset for fixed UI with scroll-padding, keep snap items consistently sized, and test across input methods and browsers. With these practices in hand, you can ship sophisticated scrolling interactions that delight users while keeping your codebase lean and accessible.