CSS Scroll Snap

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

Scroll Snap Types

• X-axis (horizontal): scroll-snap-type: x;

• Y-axis (vertical): scroll-snap-type: y;
• Block axis (usually vertical): scroll-snap-type: block;
• Inline axis (usually horizontal): scroll-snap-type: inline;

Snap Behavior

• mandatory: Forces snapping at each point.

• proximity: Snaps only when near a point, allowing free scrolling otherwise.

Snap Points and Alignment

• scroll-snap-align: Determines alignment of child elements

  • start → Snap to element start
  • center → Snap to element center
  • end → Snap to element end
• scroll-snap-stop: Control skipping of snap points
  • normal → Allows skipping
  • always → Forces stop at each snap point

Example 1: Horizontal Image Carousel

<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 :

Example 2: Full-Screen Vertical Sections

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;
}