Clean • Professional
CSS Scroll Snap lets elements snap to defined positions during scrolling, creating smooth, precise, and predictable navigation. It is widely used for carousels, galleries, and full-page scrolling sections.
Browser Support (2025): Chrome 69+, Firefox 68+, Safari 11+, Edge
X-axis (horizontal): scroll-snap-type: x;
scroll-snap-type: y;scroll-snap-type: block;scroll-snap-type: inline;mandatory: Forces snapping at each point.
scroll-snap-align: Determines alignment of child elements
start → Snap to element startcenter → Snap to element centerend → Snap to element endnormal → Allows skippingalways → Forces stop at each snap point<div class="carousel">
<img src="image1.jpg" alt="Image 1">
<img src="image2.jpg" alt="Image 2">
<img src="image3.jpg" alt="Image 3">
<img src="image4.jpg" alt="Image 4">
</div>
.carousel {
display: flex;
overflow-x: auto;
scroll-snap-type: x mandatory; /* Horizontal snapping */
gap: 10px;
padding: 10px;
width: 100%;
scrollbar-width: none; /* Firefox */
}
.carousel::-webkit-scrollbar {
display: none; /* Chrome/Safari */
}
.carousel img {
width: 300px;
height: 200px;
object-fit: cover;
scroll-snap-align: center; /* Center images when snapping */
scroll-snap-stop: always; /* Prevent skipping during fast scroll */
border-radius: 12px;
transition: transform 0.3s;
}
.carousel img:hover {
transform: scale(1.05); /* Optional hover effect */
}
Output :
For landing pages or full-page scroll effects, scroll snapping can create a smooth vertical experience.
<div class="container">
<section class="section" style="background-color: lightcoral;">Section 1</section>
<section class="section" style="background-color: lightseagreen;">Section 2</section>
<section class="section" style="background-color: lightblue;">Section 3</section>
</div>
.container {
height: 100dvh; /* Dynamic viewport height */
overflow-y: auto;
scroll-snap-type: y mandatory; /* Vertical snapping */
}
.section {
height: 100dvh; /* Full viewport height */
scroll-snap-align: start; /* Snap at start of each section */
display: flex;
justify-content: center;
align-items: center;
font-size: 3rem;
color: white;
font-weight: bold;
}