CSS - scroll-behavior
The scroll-behavior
CSS property specifies the scrolling behavior for a scrolling box, when scrolling happens due to navigation or CSSOM scrolling APIs. Any other scrolls, e.g. those that are 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.
Example
HTML
<div id="scrollContainer"> This is some long text, which is used to demonstrate the effect of the <code>scroll-behavior</code> CSS property. </div> <button class="scroll-auto">auto</button> <button class="scroll-smooth">smooth</button>
CSS
div { width: 100px; height: 100px; overflow-y: scroll; } .auto { scroll-behavior: auto; } .smooth { scroll-behavior: smooth; }
JavaScript
function scrollElement(behavior) { var scrollContainer = document.getElementById("scrollContainer"); scrollContainer.className = behavior; var scrollPosition = scrollContainer.scrollTop === 0 ? scrollContainer.scrollHeight : 0; scrollContainer.scrollTo(0, scrollPosition); } // Adding event listeners to the buttons. document.querySelector(".scroll-auto").addEventListener( "click", function () { scrollElement("auto"); }); document.querySelector(".scroll-smooth").addEventListener( "click", function () { scrollElement("smooth"); });
Output
Syntax
/* Keyword values */ scroll-behavior: auto; scroll-behavior: smooth; /* Global values */ scroll-behavior: inherit; scroll-behavior: initial; scroll-behavior: unset;
Values
auto
- The scrolling box is scrolled in an instant fashion.
smooth
- The scrolling box is scrolled 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 <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> smooth
Description
The scroll-behavior
CSS property specifies the scrolling behavior for a scrolling box, when scrolling happens due to navigation or CSSOM scrolling APIs. Any other scrolls, e.g. those that are 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.
User agents may ignore this property.
Initial value | auto |
---|---|
Applies to | scrolling boxes |
Inherited | no |
Media | visual |
Computed value | as specified |
Animatable | no |
Canonical order | the unique non-ambiguous order defined by the formal grammar |
Browser Compatibility
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
Basic support | (Yes)[1] | 36 (36) | No support | (Yes)[1] | No support |
Feature | Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Basic support | No support | 36 (36) | No support | No support | No support |
[1] Supported in Chrome and Opera by enabling the "Smooth Scrolling" or "Enable experimental web platform features" flag.
Specifications
Specification | Status | Comment |
---|---|---|
CSS Object Model (CSSOM) View Module The definition of 'scroll-behavior' in that specification. |
Working Draft | Initial specification |
License
© 2016 Mozilla Contributors
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-us/docs/web/css/scroll-behavior