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

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

CSS
div {
  width: 100px;
  height: 100px;
  overflow-y: scroll;
}

.auto {
  scroll-behavior: auto;
}

.smooth {
  scroll-behavior: smooth;
}

JavaScript

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  

CSS
/* 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

CSS
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 valueauto
Applies toscrolling boxes
Inheritedno
Mediavisual
Computed valueas specified
Animatableno
Canonical orderthe 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

CSS CSS Property CSSOM View Reference