A box with overflow: auto or scroll (Overflow) is a scroll container, tuned with:
scroll-behavior: smooth animates jumps from #fragment links and scrollIntoView(); honor prefers-reduced-motion.
scroll-padding-top: 4rem keeps a sticky header from covering a link target.
overscroll-behavior: contain stops scroll chaining, where reaching the end of a modal scrolls the page behind it.
scrollbar-gutter: stable reserves scrollbar space so content does not shift, and scrollbar-width: thin plus scrollbar-color style the bar. They became Baseline in December 2024 and (scrollbar-color) December 2025, replacing ::-webkit-scrollbar.
Scroll snapping makes a scroller settle on defined positions, the CSS-only carousel. Set scroll-snap-type on the container (an axis plus mandatory or proximity) and scroll-snap-align on the children; scroll-snap-stop: always stops a fast swipe from skipping slides.
.carousel {
display: flex; gap: 1rem; overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-padding-inline: 1rem; /* snap 1rem inside the edge */
overscroll-behavior-x: contain;
scrollbar-width: thin;
}
.carousel > figure { flex: 0 0 85%; scroll-snap-align: start; scroll-snap-stop: always; }For full-page sections of varying height prefer proximity, so the browser never yanks readers away from text they are still reading.