Scroll Snap & Smooth Scroll

Build native carousels and smooth-scrolling anchor links without writing any JavaScript.

CSS7 min readConcept 35 of 43

What is CSS Scroll Snapping?

In the past, building a swipeable image carousel or a smooth-scrolling page required complex JavaScript libraries.

Modern CSS provides native scrolling behavior controls. **Scroll Snapping** allows you to lock the scroll position to specific elements (like snapping to the next image in a gallery).

**Smooth Scrolling** allows the browser to smoothly animate down the page when a user clicks a table-of-contents link, instead of instantly jumping.

Why use native CSS over JavaScript plugins?

Native CSS scrolling is handled by the browser's compositor thread, making it incredibly smooth and completely immune to JavaScript main-thread locking (jank).

It also respects user device preferences automatically (like stopping the snap animation if the user has requested reduced motion), and requires zero megabytes of JS dependencies.

How do you build a native carousel?

First, tell the scrolling container how to behave: scroll-snap-type: x mandatory; (scroll horizontally, and force the browser to always stop on an element).

Second, tell the children where to align when they snap: scroll-snap-align: center; (stop with the child exactly in the center of the container).

Try it

Configure the native CSS carousel by toggling the snap rules, then test the smooth scrolling anchor links in the mock page.

Scroll Architecture

Snap Type (Parent)

Snap Align (Children)

// 1. The scrollable parent
.carousel-container {
overflow-x: auto;
scroll-snap-type: x mandatory;
}
// 2. The snapping children
.carousel-item {
scroll-snap-align: center;
}

Scroll horizontally to test the snapping physics.

01
02
03
04
05

Check yourself

Pick an answer to lock it in, then read why. Getting one wrong is part of how it sticks.

  1. 1Where must you apply the scroll-snap-align property?
  2. 2What is the difference between mandatory and proximity scroll snapping?
  3. 3How do you prevent anchor links from jumping underneath a sticky navigation bar?

Remember this

  • scroll-snap-type goes on the parent; scroll-snap-align goes on the children.
  • Use scroll-margin-top to prevent anchor links from getting buried under sticky headers.
  • Apply scroll-behavior: smooth to enable animated anchor jumping.

Done with this concept?

Mark it complete to track your progress. No login needed.