A snapping carousel
Swipe or shift-scroll the carousel: it always settles on a whole slide. Even a script that scrolls to 130px is snapped to the nearest snap point, the start of slide 2 at 200px. Change mandatory to proximity and the script's 130 stays where it is, because it isn't close enough to a snap point.
scroll-snap makes a scroll container settle on chosen items, position: sticky keeps headers in view while their section scrolls, and scroll-driven animations (animation-timeline: scroll() and view()) tie an animation's progress to the scroll position instead of to time.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 5 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Make a vertical list .feed (height 300px) whose .post children each fill the height and snap to their start, never skipping a post on a fast flick.
Write the CSS for a page whose <header> is 64px tall and fixed, so that jumping to #pricing doesn't hide the section heading under the header.
Add a reading-progress bar that follows the whole page's scroll, only in browsers that support scroll-driven animations.
Explain it without notes
Which properties make a scroll container snap, and what is the difference between mandatory and proximity?
Why might position: sticky not work, and how do you debug it?
What is a scroll-driven animation, and how do scroll() and view() timelines differ?
Why are scroll-driven CSS animations smoother than effects built on the scroll event?
Preview
Console
Nothing logged yet.Expected console output
snap type: x mandatory
asked for 130, rests at: 200