Reference
CSS Properties

Scroll Behavior

Animates the scrolls an element is asked to make, instead of jumping to them. Check out the MDN for how to use.

An asked-for scroll is one that names a position: assigning ScrollTop or ScrollLeft, calling ScrollTo or ScrollBy, or landing a snap. A wheel or a drag is a gesture rather than a request, and keeps its own smoothing either way.

.reader {
  width: 300px;
  height: 180px;
  padding: 14px;
  border-radius: 12px;
  background-color: #f8fafc;

  scroll-behavior: smooth;
}

.line {
  margin-bottom: 10px;
  flex-shrink: 0;
  color: #475569;
}

.controls {
  flex-direction: row;
  gap: 8px;
  margin-bottom: 12px;
}

Values

  • auto (default) — an asked-for scroll arrives at once.
  • smooth — it is animated instead.

Notes

  • The property is read off the scroll container itself, not off whatever asks it to scroll, and it is not inherited.
  • <scroll>’s smoothness prop is the separate duration a wheel scroll is smoothed over, and it is what a snap animates over while scroll-behavior is auto.
  • Passing a duration explicitly — ScrollTo(0, 100, 0) — overrides both, which is how a scroll can be made to jump under smooth.
  • A new drag takes over from wherever a running animation reached, rather than finishing it first.
PreviousScaleNextScroll Snap