Codectionary / Developer documentation / CSS

scroll-behavior and Scroll Snap

scroll-behavior: smooth animates scrolling to anchors instead of jumping instantly. Scroll snap properties (scroll-snap-type and scroll-snap-align) create carousel-like scrolling where content snaps neatly into position, commonly used for image galleries and full-page sections, without any JavaScript.

Syntax

scroll-behavior: smooth;
scroll-snap-type: x mandatory;

Examples

Smooth Anchor Scrolling

Making in-page anchor links (like #section-2) scroll smoothly instead of jumping.

html {
  scroll-behavior: smooth;
}
/* Now <a href="#section-2"> smoothly animates the scroll, no JS needed */
  1. The fragment link points to a real target far enough away for scrolling to be visible.
  2. scroll-behavior controls applicable programmatic and navigation scrolling, not every user gesture.
  3. Respect reduced-motion preferences in a production implementation.
HTML used by this example
<a href="#section-2">Jump to the second section</a><section style="height:110vh"><h3>First section</h3></section><section id="section-2" style="height:70vh"><h3>Second section</h3><a href="#top">Back to the top</a></section>

A CSS-Only Snap Carousel

Building a horizontally scrolling gallery that snaps to each item.

/* Demo setup: sizing, structure or neutral surfaces. */
.gallery{max-width:28rem}.gallery img{flex:0 0 75%;width:75%;height:12rem;object-fit:cover}

.gallery {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  gap: 16px;
}

.gallery img {
  scroll-snap-align: center; /* each image snaps to center as the user scrolls */
  flex: 0 0 80%;
}
  1. The gallery contains actual images wider in total than the available space.
  2. The scrolling container and each image’s snap alignment work together.
  3. Scroll horizontally with a trackpad, touch gesture or scrollbar; keep all content reachable.
HTML used by this example
<div class="gallery"><img class="preview-slide" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22480%22%20height%3D%22240%22%20viewBox%3D%220%200%20480%20240%22%3E%3Crect%20width%3D%22480%22%20height%3D%22240%22%20fill%3D%22%23e0f2fe%22%2F%3E%3Ccircle%20cx%3D%22365%22%20cy%3D%2255%22%20r%3D%2230%22%20fill%3D%22%23fbbf24%22%2F%3E%3Cpath%20d%3D%22M0%20240%20135%2055%20280%20240%22%20fill%3D%22%230f766e%22%2F%3E%3Cpath%20d%3D%22m150%20240%20155-150%20175%20150%22%20fill%3D%22%235b21b6%22%2F%3E%3Ctext%20x%3D%2220%22%20y%3D%22218%22%20fill%3D%22white%22%20font-size%3D%2224%22%20font-family%3D%22sans-serif%22%3EOriginal%20landscape%3C%2Ftext%3E%3C%2Fsvg%3E" alt="Landscape slide 1"><img class="preview-slide" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22480%22%20height%3D%22240%22%20viewBox%3D%220%200%20480%20240%22%3E%3Crect%20width%3D%22480%22%20height%3D%22240%22%20fill%3D%22%23e0f2fe%22%2F%3E%3Ccircle%20cx%3D%22365%22%20cy%3D%2255%22%20r%3D%2230%22%20fill%3D%22%23fbbf24%22%2F%3E%3Cpath%20d%3D%22M0%20240%20135%2055%20280%20240%22%20fill%3D%22%230f766e%22%2F%3E%3Cpath%20d%3D%22m150%20240%20155-150%20175%20150%22%20fill%3D%22%235b21b6%22%2F%3E%3Ctext%20x%3D%2220%22%20y%3D%22218%22%20fill%3D%22white%22%20font-size%3D%2224%22%20font-family%3D%22sans-serif%22%3EOriginal%20landscape%3C%2Ftext%3E%3C%2Fsvg%3E" alt="Landscape slide 2"><img class="preview-slide" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22480%22%20height%3D%22240%22%20viewBox%3D%220%200%20480%20240%22%3E%3Crect%20width%3D%22480%22%20height%3D%22240%22%20fill%3D%22%23e0f2fe%22%2F%3E%3Ccircle%20cx%3D%22365%22%20cy%3D%2255%22%20r%3D%2230%22%20fill%3D%22%23fbbf24%22%2F%3E%3Cpath%20d%3D%22M0%20240%20135%2055%20280%20240%22%20fill%3D%22%230f766e%22%2F%3E%3Cpath%20d%3D%22m150%20240%20155-150%20175%20150%22%20fill%3D%22%235b21b6%22%2F%3E%3Ctext%20x%3D%2220%22%20y%3D%22218%22%20fill%3D%22white%22%20font-size%3D%2224%22%20font-family%3D%22sans-serif%22%3EOriginal%20landscape%3C%2Ftext%3E%3C%2Fsvg%3E" alt="Landscape slide 3"></div>

Parameters and values

  • scroll-behavior (auto | smooth): Controls whether scrolling to anchors/targets is animated
  • scroll-snap-type (x | y | both, mandatory | proximity): Enables snap scrolling on a container
  • scroll-snap-align (start | center | end): Sets where a child snaps to within the container

Best practices

  • Use scroll-behavior: smooth as a simple, one-line upgrade for anchor link navigation, with no JavaScript required
  • Use mandatory snap type for carousels where content should always land precisely on an item; use proximity for a softer, less forceful snap
  • Combine scroll-snap with overflow: auto/scroll on the container - snap properties do nothing without a scrollable container
  • Respect prefers-reduced-motion by disabling scroll-behavior: smooth for users who have requested reduced motion

Browser compatibility

chrome
Yes
firefox
Yes
safari
Yes
edge
Yes

These are the existing reference’s support labels, not tested minimum versions. Individual values and APIs can have different support. Check the linked specification before choosing a browser target.

CSS specifications (modules)

Specifications & further reading