0Pricing
CSS Academy · Lesson

scroll-snap-type and scroll-snap-align

Create carousel and paging scroll experiences with CSS scroll snap properties.

scroll-snap-type and scroll-snap-align is a free CSS Academy lesson on CoddyKit — lesson 3 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the CSS Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

What is CSS Scroll Snap?

CSS Scroll Snap allows scrollable containers to "snap" to specific positions after scrolling, creating controlled paging and carousel behaviors without JavaScript.

scroll-snap-type on Container

Enable snap on the scrollable container:

.carousel {
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
  /* x = horizontal snapping, mandatory = must snap */
}

scroll-snap-type Values

Two parts:

  • Axis: x, y, or both
  • Strictness: mandatory (always snaps) or proximity (snaps when near a snap point)
.paged {
  scroll-snap-type: y mandatory; /* vertical paging */
}

.freeform {
  scroll-snap-type: x proximity; /* snaps when close */
}

scroll-snap-align on Items

Define where each child snaps within the container:

.carousel-item {
  scroll-snap-align: start;  /* snap to start edge */
  /* options: start, center, end */
}

Full-Screen Page Snap

A vertically paging full-screen section layout:

.sections {
  height: 100dvh;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
}

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

Horizontal Carousel Snap

A horizontal card carousel with snapping:

.carousel {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  gap: 16px;
  padding: 0 24px;
  -ms-overflow-style: none;  /* hide scrollbar IE/Edge */
  scrollbar-width: none;     /* hide scrollbar Firefox */
}

.carousel::-webkit-scrollbar { display: none; }

.card {
  flex: 0 0 280px;
  scroll-snap-align: start;
}

scroll-snap-stop

scroll-snap-stop: always prevents fast scrolling from skipping snap points. The user cannot skip ahead more than one item per scroll gesture.

.slide {
  scroll-snap-align: start;
  scroll-snap-stop: always; /* must stop at each slide */
}

scroll-snap-margin and scroll-padding

Offset the snap position on items (scroll-margin) or on the container (scroll-padding):

.carousel {
  scroll-padding: 0 24px; /* snap respects container padding */
}

overscroll-behavior

overscroll-behavior: contain prevents scroll chaining — when the container reaches its scroll boundary, the page does not scroll too:

.modal-body {
  overflow-y: auto;
  overscroll-behavior: contain;
}

Accessibility Considerations

Snap carousels should still be keyboard navigable. Arrow keys should move between snap points. Add ARIA carousel roles and labels. Programmatic scroll via JavaScript should respect the same snap points.

CSS vs JS Carousels

CSS scroll snap handles most basic carousel needs without JavaScript: snap-to, hide scrollbar, padding alignment. Use a JS library when you need: dot indicators, prev/next buttons with animated transitions, or complex accessibility management.

Quick Check

Which value of scroll-snap-type ensures the container always stops exactly at a snap point, never in between?

Recap

CSS Scroll Snap creates paging and carousel behaviors. Set scroll-snap-type: x mandatory on the container and scroll-snap-align: start on items. Use scroll-snap-stop: always to prevent skipping. Combine with overscroll-behavior: contain to prevent scroll chaining. Hide scrollbars with scrollbar-width: none for clean visuals.

Frequently asked questions

Is the “scroll-snap-type and scroll-snap-align” lesson free?

Yes — the full text of “scroll-snap-type and scroll-snap-align” is free to read here on the web, and the CSS Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the CSS Academy course, upgrade to CoddyKit PRO.

What will I learn in “scroll-snap-type and scroll-snap-align”?

Create carousel and paging scroll experiences with CSS scroll snap properties. You practise CSS Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start CSS Academy?

No prior experience is required. CSS Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 3 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “scroll-snap-type and scroll-snap-align” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this CSS Academy lesson?

Yes. Every CSS Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

  1. overflow: hidden scroll auto clip
  2. scroll-behavior: smooth
  3. scroll-snap-type and scroll-snap-align
  4. Scrollbar Styling with ::-webkit-scrollbar
← Back to CSS Academy