CSS - scroll-behavior Property

CSS scroll-behavior property controls how smoothly the browser scrolls when a user clicks on a link or uses the scrollbar.

Possible Values

  • auto − Default value. This value allows the browser to use its default scrolling behavior.

  • smooth − This value create a smooth scrolling effect when you click on links.

Applies to

Scrolling boxes.

DOM Syntax

object.style.scrollBehavior: "auto|smooth";

CSS Scrollbar Behavior - Auto Value

The following example demostartes how to use the scroll-behavior: auto property −

<html>
<head>
<style>
   nav {
      background-color: rgb(67, 238, 45);
      padding: 5px;
      text-align: center;
      width: 300px;
   }
   nav a {
      margin:5px;
      text-decoration: none;
   }
   .scroll-behavior-auto {
      background-color: #F1EFB0;
      height: 150px;
      overflow: auto;
      scroll-behavior: auto;
      text-align: center;
      width: 300px;
      padding: 5px;
   }
   .scrolling-section {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100%;
   }
</style>
</head>
<body>
   <nav>
      <a href="#section1">Topic 1</a>
      <a href="#section2">Topic 2</a>
      <a href="#section3">Topic 3</a>
   </nav>
   <div class="scroll-behavior-auto">
      <div class="scrolling-section" id="section1">Topic 1</div>
      <div class="scrolling-section" id="section2">Topic 2</div>
      <div class="scrolling-section" id="section3">Topic 3</div>
   </div>
</body>
</html>

CSS Scrollbar Behavior - Smooth Value

The following example demostartes how to use the scroll-behavior: smooth property −

<html>
<head>
<style>
   nav {
      background-color: rgb(67, 238, 45);
      padding: 5px;
      text-align: center;
      width: 300px;
   }
   nav a {
      margin:5px;
      text-decoration: none;
   }
   .scroll-behavior-auto {
      background-color: #F1EFB0;
      height: 150px;
      overflow: auto;
      scroll-behavior: smooth;
      text-align: center;
      width: 300px;
      padding: 5px;
   }
   .scrolling-section {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100%;
   }
</style>
</head>
<body>
   <nav>
      <a href="#section1">Topic 1</a>
      <a href="#section2">Topic 2</a>
      <a href="#section3">Topic 3</a>
   </nav>
   <div class="scroll-behavior-auto">
      <div class="scrolling-section" id="section1">Topic 1</div>
      <div class="scrolling-section" id="section2">Topic 2</div>
      <div class="scrolling-section" id="section3">Topic 3</div>
   </div>
</body>
</html>
Advertisements