CSS Scroll Snap: Guiding User Scrolling
CSS Scroll Snap turns a free-scrolling container into a slideshow, guiding users to land perfectly on predefined points. It's ideal for image carousels or full-page sections where partially visible elements look sloppy.
Why it exists
Before Scroll Snap, creating carousels or section-based scrolling required complex JavaScript to calculate positions and handle animations. This was often buggy, performed poorly, and created accessibility issues. CSS Scroll Snap provides a native, performant, and accessible browser solution for this common UI pattern.
The mental model
Think of a scroll container as a filmstrip projector. By default, you can stop the filmstrip anywhere, leaving a frame half-visible. With Scroll Snap, the projector has detents, ensuring you always land perfectly centered on a single frame. You define the scroll container's behavior, and then you tell each "frame" (child element) how it should align within the viewport.
How it works
You apply properties in two places. First, on the scroll container (the parent with overflow: scroll), you set scroll-snap-type. This defines the axis to snap on (x, y, or both) and how strictly (mandatory or proximity). A mandatory snap will always force the scroll position to a snap point, while proximity only snaps if the user stops scrolling near one. Second, on the direct children, you set scroll-snap-align (start, center, or end) to define which part of the child should align with the container's viewport.
When to use it
Use Scroll Snap for UI patterns that present content in discrete sections. This includes image galleries, product carousels, step-by-step tutorials, or websites with full-screen vertical sections. It creates a controlled, polished experience where partial views of content are undesirable.
When not to use it
Avoid Scroll Snap on long articles or feeds where free, uninterrupted scrolling is expected. Forcing a snap on every paragraph would be frustrating. It's also not ideal if child elements have vastly different sizes, as this can create an unpredictable and jarring snapping experience for the user.
One canonical example
To create a basic horizontal image carousel, you would set scroll-snap-type: x mandatory; on the container element. Then, for each child img element inside, you would set scroll-snap-align: center;. As the user scrolls horizontally, the browser automatically ensures that one image always snaps to the center of the container. You can use scroll-padding on the container to add space so the image doesn't snap flush with the edge.
Interview question
Which scenario best illustrates the primary purpose of CSS Scroll Snap?
- a.Building an image gallery where each image perfectly centers in the viewport after a user scrolls.Correct
- b.Creating a long, continuously flowing article where users can scroll freely without interruption.
- c.Implementing a navigation menu that smoothly scrolls to different sections of a single page.
- d.Optimizing the loading of off-screen content in a scrollable list to improve performance.
Why? this is the answer
The card states Scroll Snap "guides users to land perfectly on predefined points" and is "ideal for image carousels or full-page sections where partially visible elements look sloppy." Option A directly describes this core functionality. Option C is tempting because smooth scrolling often accompanies section navigation, but Scroll Snap's primary purpose is the precise snapping, not just smooth scrolling itself.
Just read this? Test yourself on what you have been reading.
Read the original → developer.mozilla.org
You just looked this up. Could you explain it out loud?
That is the part interviews actually test. Tezvyn takes questions like this one and gives you what the interviewer is really checking, the answer that lands, and the mistake that ends the conversation, in the four minutes before your next meeting.
The iPhone app is on the way
We are building it. Until it lands, nothing here is held back from you: every interview card, your saved cards, streaks and the job board all work in Safari, plus hundreds of free practice quizzes of thirty questions each. Sign in and it all carries over to the app the day it arrives.
Want it as an icon? Tap Share at the bottom of Safari, then Add to Home Screen. It opens full screen and the cards you have read stay available offline.
We are hiring for this. Open roles that interview on css — each one lists the topics its interview covers.
See open roles