Smooth Scrolling with Pure CSS

The CSS scroll-behavior property allows us to change the behavior of scroll. The following are the values are set within the scrolling box −

  • auto − A scroll effect is set between the elements within the scrolling box.

  • Smooth − A smooth animated scroll effect is set between the elements The following examples illustrate CSS scroll-behavior property.

Scroll Behavior Smooth

The scroll behavior is set to smooth for the div container −

#parent {
   scroll-behavior: smooth;
   width: 250px;
   height: 200px;
   overflow-y: scroll
}

The following is the div container for which the scroll is set −

<div id="parent">
   <div class="blue" id="first"><a href=#last>Last</a></div>
   <div class="pink"></div>
   <div class="blue"></div>
   <div class="pink" id="last"><a href=#first>First</a></div>
</div>

Example

Let us see the example −

<!DOCTYPE html>
<html>
<head>
   <style>
      html {
         line-height: 200px;
         margin: 30px;
         text-align: center;
         vertical-align: middle;
      }
      #parent {
         scroll-behavior: smooth;
         width: 250px;
         height: 200px;
         overflow-y: scroll
      }
      .pink {
         height: 200px;
         box-shadow: inset 0 0 50px deeppink;
      }
      .blue {
         height: 200px;
         box-shadow: inset 0 0 50px darkblue;
      }
   </style>
</head>
<body>
   <div id="parent">
      <div class="blue" id="first"><a href=#last>Last</a></div>
      <div class="pink"></div>
      <div class="blue"></div>
      <div class="pink" id="last"><a href=#first>First</a></div>
   </div>
</body>
</html>

Scroll Behavior Auto

The scroll behavior is set to smooth for the div container −

#parent {
   scroll-behavior: auto;
   width: 150px;
   height: 150px;
   overflow: hidden;
   border: 22px groove tomato;
   border-radius: 50%;
}

The following is the parent div −

<div id="parent">
   <div class="blue" id="first"><a href=#last>Last</a></div>
   <div class="green"></div>
   <div class="blue"></div>
   <div class="green" id="last"><a href=#first>First</a></div>
</div>

Example

Let us see the example −

<!DOCTYPE html>
<html>
<head>
   <style>
      html {
         line-height: 150px;
         margin: 30px;
         text-align: center;
         vertical-align: middle;
      }
      #parent {
         scroll-behavior: auto;
         width: 150px;
         height: 150px;
         overflow: hidden;
         border: 22px groove tomato;
         border-radius: 50%;
      }
      .green {
         height: 150px;
         box-shadow: inset 0 0 50px darkgreen;
      }
      .blue {
         height: 150px;
         box-shadow: inset 0 0 50px darkblue;
      }
   </style>
</head>
<body>
   <div id="parent">
      <div class="blue" id="first"><a href=#last>Last</a></div>
      <div class="green"></div>
      <div class="blue"></div>
      <div class="green" id="last"><a href=#first>First</a></div>
   </div>
</body>
</html>
Updated on: 2023-12-27T16:31:01+05:30

485 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements