The scroll-behavior CSS property sets the behavior for a scrolling box when scrolling is triggered by the navigation or CSSOM scrolling APIs.

Initial valueauto
Applies toscrolling boxes
Inheritedno
Mediavisual
Computed valueas specified
Animation typediscrete
Canonical orderthe unique non-ambiguous order defined by the formal grammar

Note that any other scrolls, such as those performed by the user, are not affected by this property. When this property is specified on the root element, it applies to the viewport instead. This property specified on the body element will not propagate to the viewport.

User agents are allowed to ignore this property.

Syntax

/* Keyword values */
scroll-behavior: auto;
scroll-behavior: smooth;

/* Global values */
scroll-behavior: inherit;
scroll-behavior: initial;
scroll-behavior: unset;

The scroll-behavior property is specified as one of the keyword values listed below.

Values

auto
The scrolling box scrolls instantly.
smooth
The scrolling box scrolls in a smooth fashion using a user-agent-defined timing function over a user-agent-defined period of time. User agents should follow platform conventions, if any.

Formal syntax

auto | smooth

Example

HTML

<nav>
  <a href="#page-1">1</a>
  <a href="#page-2">2</a>
  <a href="#page-3">3</a>
</nav>
<scroll-container>
  <scroll-page id="page-1">1</scroll-page>
  <scroll-page id="page-2">2</scroll-page>
  <scroll-page id="page-3">3</scroll-page>
</scroll-container>

CSS

a {
  display: inline-block;
  width: 50px;
  text-decoration: none;
}
nav, scroll-container {
  display: block;
  margin: 0 auto;
  text-align: center;
}
nav {
  width: 339px;
  padding: 5px;
  border: 1px solid black;
}
scroll-container {
  display: block;
  width: 350px;
  height: 200px;
  overflow-y: scroll;
  scroll-behavior: smooth;
}
scroll-page {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  font-size: 5em;
}

Result

Accessibility concerns

Mind users with motion sickness

Vestibular disorders may be caused by disease, aging, or injury. Users with Vestibular disorders may suffer from motion sickness which in turn can cause dizziness, fatigue and nausea.

Using the CSS prefers-reduced-motion media query, we can disable smooth scrolling for users that have opted in to reduced motion in their browser settings.

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

Specifications

Specification Status Comment
CSS Object Model (CSSOM) View Module
The definition of 'scroll-behavior' in that specification.
Working Draft Initial specification

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
scroll-behaviorChrome Full support 61Edge No support NoFirefox Full support 36IE No support NoOpera Full support 48Safari No support NoWebView Android Full support 61Chrome Android Full support 61Firefox Android Full support 36Opera Android Full support 45Safari iOS No support NoSamsung Internet Android ?

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown

Document Tags and Contributors

Last updated by: Malvoz,