CSS Academy · Lesson

scroll-snap-type and scroll-snap-align

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

Lesson 3 of 413 steps

scroll-snap-type and scroll-snap-align is a free CSS Academy lesson on CoddyKit. This is 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, and your progress syncs across the web and the CoddyKit app. The CSS Academy course includes 4 lessons in total.

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:

  <div class="carousel">
    <div class="item">1</div><div class="item">2</div><div class="item">3</div>
  </div>

scroll-snap-type Values

Two parts:

Axis: x, y, or both
Strictness: mandatory (always snaps) or proximity (snaps when near a snap point)

  <div class="paged">Paged container</div>
  <div class="freeform">Freeform container</div>

scroll-snap-align on Items

Define where each child snaps within the container:

  <div class="carousel-demo">
    <div class="carousel-item">1</div><div class="carousel-item">2</div>
  </div>

Full-Screen Page Snap

A vertically paging full-screen section layout:

  <div class="sections">
    <div class="section">Section 1</div><div class="section">Section 2</div>
  </div>

Horizontal Carousel Snap

A horizontal card carousel with snapping:

  <div class="carousel">
    <div class="card">Card 1</div><div class="card">Card 2</div><div class="card">Card 3</div>
  </div>

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.

  <div class="slider">
    <div class="slide">1</div><div class="slide">2</div>
  </div>

scroll-snap-margin and scroll-padding

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

  <div class="carousel">Carousel container</div>

overscroll-behavior

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

  <div class="modal-body">Line 1<br>Line 2<br>Line 3<br>Line 4<br>Line 5<br>Line 6</div>

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?

Answer it in the interactive lesson

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.

Free to start

Learn CSS with an AI tutor — free

Write and run real code in your browser, get instant help from a 24/7 AI tutor, and pick up where you left off on the web or in the app.

Courses: 40
Lessons: 159

Start learning free View the full course

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. 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. The CSS Academy course includes 4 lessons in total.

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, so you can start here or from the beginning and move at your own pace. This is lesson 3 of 4.

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

overflow: hidden scroll auto clip
scroll-behavior: smooth
scroll-snap-type and scroll-snap-align
Scrollbar Styling with ::-webkit-scrollbar

← Back to CSS Academy