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 ModuleThe 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.
Update compatibility data on GitHub
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
Full support 14 |
WebView Android
Full support 61 |
Chrome Android
Full support 61 |
Firefox Android
Full support 36 |
Opera Android
Full support 45 |
Safari iOS
Full support 14 |
Samsung Internet Android
Full support 8.0 |
Legend
- Full support
- Full support
- No support
- No support
scroll-behavior by Mozilla Contributors is licensed under CC-BY-SA 2.5.