IT lexicon › Web › CSS scroll snap

CSS scroll snap

Web På svenska → Updated: 2026-07-30

A CSS feature that makes scrolling "snap" to set points — like a carousel that lands neatly on each image, or a page-by-page layout that clicks into place. It gives a polished, app-like scroll experience with no JavaScript at all.

Mechanic: the container gets scroll-snap-type (e.g. x mandatory = snap horizontally, always) and the children get scroll-snap-align (where they should land — start, center, end). When the user scrolls/swipes, the browser smoothly settles to the nearest snap point. Use case: image carousels, product galleries, page-by-page onboarding flows, horizontal "stories" strips. Win: this previously required heavy JS libraries (Swiper et al.) with choppier performance; scroll snap makes it built-in, smooth, and hardware-accelerated. Complemented by scroll-behavior: smooth and scroll-margin/padding for fine-tuning. Widely supported. A good example of how CSS has taken over things that required JavaScript. Related to intersection observer and content-visibility.

← Back to the lexicon