Smooth scroll behavior and scroll snapping

CSS gives you two related controls for how a scroll container moves: scroll-behavior softens the motion between in-page jumps, and the scroll-snap-* properties hold a container at defined points so each section lands cleanly. They are both simple to write, but their effect differs, and each has an accessibility caveat worth knowing before you ship them.

Smooth scrolling

scroll-behavior: smooth makes a scroll container animate to a target instead of jumping instantly. It applies when the scroll is triggered by an anchor link, scrollIntoView(), or any browser-initiated scroll to a point, not when a user drags the scrollbar by hand.

html {
  scroll-behavior: smooth;
}

It is a small but genuine UX improvement for long, single-page marketing and documentation pages with in-page link navigation, and it is widely supported. The main limit is that reduced-motion users may prefer instant jumps, and some browsers respect a prefers-reduced-motion preference. If you animate the scroll yourself, keep it short and respect that preference rather than forcing motion on everyone.

Snap containers

Scroll snap makes a scroll container stop at defined positions. It takes two cooperating properties: scroll-snap-type on the container and scroll-snap-align on each child that is a snap point.

.gallery {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
}
.gallery img {
  scroll-snap-align: center;
}

x and y select the axis, and mandatory forces the browser to land on a snap point (useful for a well-behaved carousel) while proximity only snaps when the browser decides the drift is close enough (kinder on long content, because it does not fight the user). Add scroll-padding to the container to keep the snap point clear of a sticky header, which is the classic pairing with a fixed navigation. The position-sticky troubleshooting article covers the header overlap problem you will hit when combining the two.

Accessibility notes

The chief a11y concern is the combination of mandatory snapping with fast scrolling. On a long page, scroll-snap-type: y mandatory can make it hard for a user to scroll past a section, or trap scrolling on a mouse without fine wheel control. Using proximity instead of mandatory, and so only applying snap to a dedicated carousel or gallery rather than the whole document, avoids most of this. Keep the page itself free of snapping unless the design really needs whole-sheet stepping.

Before layering both features on a whole site, confirm how the container responds on touch and with a keyboard. A carousel also needs a real overflow-x scroll container to hold the snap; without one the snap does nothing. If a snap config seems ignored, check that the scrolling element itself (not a parent) is the container carrying both scroll-snap-type and its children and a real horizontal overflow, and read the general HTML-CSS-JS troubleshooting order for how to isolate that class of symptom. Desktop to mobile, snap and smooth both compose with the responsive breakpoints guide, since a snap gallery that works well wide should keep snapping on a phone viewport.