🎯 CSS scroll-s-snap-align — Complete Tutorial

The CSS scroll-snap-align property defines how a scroll target (like a card, slide, section, or panel) should align inside a scroll container when snapping occurs. It determines the final resting position of an element during scroll snapping.

>>“scroll-snap-align tells the browser exactly where an element should land when scrolling stops.”

Note

✔ Works only inside a container with scroll-snap-type enabled
✔ Applied on the child elements (the snap targets)
✔ Perfect for sliders, carousels, full-page scroll layouts, and timelines

📦 Syntax

scroll-snap-align syntax

scroll-snap-align: start | center | end | none;
ValueDescription
startElement aligns at the start of the scroll container
centerElement aligns to the center of the container
endElement aligns at the end of the container
noneDisables snapping for this element

📌 How It Works

scroll-snap-align is applied on scroll-snap targets(the children inside a snapping container).

Scroll container

.container {
  scroll-snap-type: x mandatory;
  overflow-x: auto;
  display: flex;
}

Snap targets

.slide {
  scroll-snap-align: start;
}

🎨 1. Snap to Start (Most Common)

Each slide aligns perfectly with the left/top of the container after scrolling.

start alignment

.slide {
  scroll-snap-align: start;
}

🎨 2. Snap to Center

Popular in card sliders and image carousels.

center alignment

.card {
  scroll-snap-align: center;
}

🎨 3. Snap to End

Aligns content to the far right or bottom.

end alignment

.item {
  scroll-snap-align: end;
}

🎨 4. Disable Snap for One Element

This is useful for "spacer" items or dividers.

disable snapping

.no-snap {
  scroll-snap-align: none;
}

📌 5. Combining scroll-snap-align with scroll-padding

Together, they control exact placement of content when snapping occurs.

snap + padding

.container {
  scroll-snap-type: x mandatory;
  scroll-padding-left: 20px;
}

.card {
  scroll-snap-align: start;
}

🧪 Real-World Use Cases

1️⃣ Horizontal Card Slider

Card slider

.slider {
  display: flex;
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
}

.card {
  scroll-snap-align: center;
}

2️⃣ Full-Page Snap Sections

Full page layout

section {
  height: 100vh;
  scroll-snap-align: start;
}

body {
  scroll-snap-type: y mandatory;
}

3️⃣ Timeline / Step Scroller

Timeline snapping

.step {
  scroll-snap-align: center;
}

⚠️ Common Mistakes

  • ❌ Forgetting to add scroll-snap-type on the parent container
  • ❌ Applying scroll-snap-align to the container instead of children
  • ❌ Expecting smooth scroll without setting scroll-behavior: smooth
  • ❌ Using snapping on elements that aren't scrollable

Note

scroll-snap-type = container behavior
scroll-snap-align = element alignment

🔥 Summary

scroll-snap-align defines where your scroll targets “land” in a snapping interface. It creates delightful, precise scroll experiences—perfect for carousels, galleries, slideshows, dashboards, timelines, and full-page scroll UIs.

>>“Snap align turns rough scrolling into smooth, intentional motion.”