CSS scroll-behavior Property

The scroll-behavior CSS property specifies whether the scroll behavior should be abrupt or smooth within a scrollable box.

The scroll-behavior property specified on the body element will not propagate to the viewport. It should be specified for the html element.

Initial Value auto
Applies to Scrolling boxes.
Inherited No.
Animatable No.
Version CSSOM View Module (Working Draft)
DOM Syntax object.style.scrollBehavior = "smooth";

Syntax

scroll-behavior: auto | smooth | initial | inherit;

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      html {
      scroll-behavior: auto;
      }
      #element1 {
      height: 600px;
      background-color: #ccc;
      }
      #element2 {
      height: 600px;
      background-color: #8ebf42;
      }
    </style>
  </head>
  <body>
    <h2>Scroll-behavior property example</h2>
    <div class="main" id="element1">
      <h2>Element 1</h2>
      <a href="#element2">Click to scroll to Element 2</a>
    </div>
    <div class="main" id="element2">
      <h2>Element 2</h2>
      <a href="#element1">Click to scroll to Element 1</a>
    </div>
  </body>
</html>

Let’s see the behavior of the scroll when "smooth" value is set:

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      html {
      scroll-behavior: smooth;
      }
      #element1 {
      height: 600px;
      background-color: #ccc;
      }
      #element2 {
      height: 600px;
      background-color: #8ebf42;
      }
    </style>
  </head>
  <body>
    <h2>Scroll-behavior property example</h2>
    <div class="main" id="element1">
      <h2>Element 1</h2>
      <a href="#element2">Click to scroll to Element 2</a>
    </div>
    <div class="main" id="element2">
      <h2>Element 2</h2>
      <a href="#element1">Click to scroll to Element 1</a>
    </div>
  </body>
</html>

Values

Value Description
auto There is a abrupt scroll behavior between the elements.
smooth There is a smooth scroll behavior between the elements.
initial Makes the property use its default value.
inherit Inherits the property from its parents element.


Practice Your Knowledge

The scroll-behavior property can have the following values, except




Related articles