The scroll-behavior
CSS property specifies the scrolling behavior for a scrolling box when scrolling is triggered by one of the navigation or CSSOM scrolling APIs.
Initial value | auto |
---|---|
Applies to | scrolling boxes |
Inherited | no |
Media | visual |
Computed value | as specified |
Animation type | discrete |
Canonical order | the 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.
/* 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.
auto
smooth
auto | smooth
<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>
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; }
Specification | Status | Comment |
---|---|---|
CSS Object Model (CSSOM) View Module The definition of 'scroll-behavior' in that specification. | Working Draft | Initial specification |
Desktop | ||||||
---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | |
Basic support | 61
|
No | 36 | No | Yes
|
No |
Mobile | |||||||
---|---|---|---|---|---|---|---|
Android webview | Chrome for Android | Edge Mobile | Firefox for Android | Opera for Android | iOS Safari | Samsung Internet | |
Basic support | No | ? | No | 36 | No | No | ? |
© 2005–2018 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-behavior