CSS Scroll Behavior Demo Tool

Explore and compare CSS scroll behaviors interactively. Adjust values, see live previews, and copy generated CSS code.

Smooth vs Auto Scroll Behavior

Compare scroll-behavior: smooth and scroll-behavior: auto side by side. Click any item button to scroll to it in both containers.

scroll-behavior: smooth

scroll-behavior: auto

.container-smooth {
  scroll-behavior: smooth;
  overflow-y: auto;
}

.container-auto {
  scroll-behavior: auto;
  overflow-y: auto;
}

Scroll Margin

scroll-margin adds an offset around an element when it becomes a scroll target (e.g., via anchor link or scrollIntoView). Adjust the value and click a section to see the effect.

scroll-margin-top: 20px

.target-element {
  scroll-margin-top: 20px;
}

Scroll Padding

scroll-padding is set on the scroll container to define an inset from the edges. It affects where scroll-snap and scrollIntoView position elements. The red dashed line shows the padding area.

scroll-padding-top: 40px

.scroll-container {
  scroll-padding-top: 40px;
  overflow-y: auto;
}

Anchor Navigation

Click the navigation links to smoothly scroll to each section. This uses html { scroll-behavior: smooth; } combined with anchor links (#id).

html {
  scroll-behavior: smooth;
}

/* Navigation link */
<a href="#section-id">Go to Section</a>

/* Target section */
<section id="section-id">...</section>

Scroll Snap

Scroll horizontally to see snap behavior. Adjust scroll-snap-type and scroll-snap-align to see different effects.

scroll-snap-type

scroll-snap-align

Panel 1 — Start

Panel 2 — Explore

Panel 3 — Create

Panel 4 — Build

Panel 5 — Ship

.snap-container {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
}

.snap-item {
  min-width: 100%;
  scroll-snap-align: start;
}