The scroll-behavior
CSS property sets the behavior for a scrolling box when scrolling is triggered by the navigation or CSSOM scrolling APIs.
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
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 definition
Initial value | auto |
---|---|
Applies to | scrolling boxes |
Inherited | no |
Computed value | as specified |
Animation type | discrete |
Formal syntax
auto | smooth
Examples
Setting smooth scroll behavior
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
Specifications
Specification | Status | Comment |
---|---|---|
CSS Object Model (CSSOM) View Module The definition of 'scroll-behavior' in that specification. |
Working Draft | Initial specification |
Browser compatibility
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
scroll-behavior | Chrome Full support 61 | Edge Full support 79 | Firefox Full support 36 | IE No support No | Opera Full support 48 | Safari No support No | WebView Android Full support 61 | Chrome Android Full support 61 | Firefox Android Full support 36 | Opera Android Full support 45 | Safari iOS No support No | Samsung Internet Android Full support 8.0 |
Legend
- Full support
- Full support
- No support
- No support