Creating custom scrollbar in css

Default scrollbars are boring so let’s try building a awesome 😎 custom scrollbar using css.

First we need to create a container with some text .

<div class="custom-scrollbar">
  <p>
    "Doctors are just the same as lawyers; the only difference is
    that lawyers merely rob you, whereas doctors rob you and kill 
    you too."

    <hr>

   “Wine is constant proof that God loves us and loves to see us
    happy.”

    <hr>

    “If you’re going to tell people the truth, be funny or they’ll
     kill you.”

  </p>
</div>

Now lets add the height and width to the div

.custom-scrollbar {

     height : 70px; //make content scroll by setting small height

     width  : 500px;

     background : #F5F6F9;

     overflow-y : scroll; // it creates the default scrollbar

}

The custom scrollbar looks like

Now lets add css to the scrollbar for make it awesome

Before applying style we need to know different area of scrollbar , they are

In that picture the label 1 denotes the scrollbar- track and label 2 denotes scrollbar-thumb.

Now we can set the style to it

.custom-scrollbar::-webkit-scrollbar {

width: 10px;

}

.custom-scrollbar::-webkit-scrollbar-track { // set style to track

background : #555999;

border-radius: 10px;

}
.custom-scrollbar::-webkit-scrollbar-thumb { // sets style to thumb

background : rgba(255,255,255,0.5);

border-radius: 10px;

box-shadow:  0 0 6px rgba(0, 0, 0, 0.5);

}

So that’s how we create a custom scrollbar in css and make our website make more beautiful and attractive.

Please do follow Javascript Jeep🚙 🥶.