How To Create a Custom Scrollbar in CSS

By default, all browsers set a default scrollbar to a scrolling content box. In the below example, as you can see a default scrollbar at the right side of the scrolling box when you scroll the content.

In this article, we will create a custom scrollbar using css. The css ::-webkit-scrollbar pseudo class allows us to customize the browsers' default scrollbar.

The ::-webkit-scrollbar pseudo class is used to style the scrollbar (e.g. width).

textarea::-webkit-scrollbar{
  width: 15px;
}

The -webkit-scrollbar-track is used to modify the look of the track (progress bar) of the scrollbar (we have set background-color to blue, in the above example.).

textarea::-webkit-scrollbar-track{
  background-color: green;
}

We can use the ::-webkit-scrollbar-thumb pseudo class to customize the draggable scrolling handle (in the above example, we have set background-color to gold).

textarea::-webkit-scrollbar-thumb{
  background-color: red;
  border-radius:4px;
}

Create a custom vertical scrollbar. #

The following example creates a 15px width scrollbar which has a gray track/bar and a black handle.

<style>
 #textarea::-webkit-scrollbar{
  width: 15px;
 }
 #textarea::-webkit-scrollbar-track{
  background-color: gray;
 }
#textarea::-webkit-scrollbar-thumb{
  background-color: black;
}
</style>

<div id="textarea" style="height:100px;background-color:#eee;overflow:auto;padding:4px;margin:8px auto">
 <div style="height:400px;background-color:#ddd;"></div>
</div>

How to create a custom horizontal scrollbar. #

The following example creates a vertical and horizontal scrollbar. Click on the Try it Yourself » button to see how this looks like.

<style>
 #textarea::-webkit-scrollbar{
  width: 15px;
  height: 15px;
}
#textarea::-webkit-scrollbar-track{
  background-color:#ff7600;
}
#textarea::-webkit-scrollbar-thumb{
  background-color: blue;
  border-radius:50px;
}
</style>
<div id="textarea" style="height:100px;background-color:#eee;overflow:auto;padding:4px;margin:8px auto">
 <div style="height:400px;width:120%;background-color:#ddd;"></div>
</div> 

Hide bottom right corner box of the scrollbar. #

You may see a square box of the scrollbar, where both horizontal and vertical scrollbars meet. To change its color or remove it, we can use the ::-webkit-scrollbar-corner pseudo class.

The following example creates a 10px width horizontal and vertical scrollbar which has linear-gradient background.