Create Custom Scroll Bar Using CSS

To Create Custom Scroll Bar Using CSS styles that we are proceeding to share replace the default browser’s scrollbar styles whether it is a vertical or horizontal scrollbar. You can test this custom scrollbar on the demo page given below. There you will see 2 scrollbars, one of them is a page scrollbar and the other is a scrollable region.

We are not proceeding to use any scrollbar plugin. We’ll just search the ways to style the browser’s default scrollbar using CSS properties. Well! the benefit of using pure CSS is that the page scrolling will remain smooth as compared to scrolling plugins.

In this tutorial, you’ll come to know how to create a custom scrollbar for all browsers using pure CSS.

Create Custom Scroll Bar

If you are going to create a custom scrollbar, you just require to have some scrollable content on your page. Actually, you don’t require to make any special HTML for the custom scrollbar. If you have already a scrollbar on your website then just skip the HTML and hold the CSS. if you do not have any elements on your webpage, then you may try the below code for the scrollable box. Just have some content inside a webpage.

<div class="scrollable" style="height: 1000px; width: 400px"> 
This is a scrollable div.
</div>

Besides this, we designed three classes for the vertical and horizontal scroll. You may add the “horizontal scroll” class to a div element to make a horizontal scrollable box.

<div class="horizontal-scroll">
Place add div content here...
</div>

Furthermore, you can use the “vertical scroll” class for the vertical scrollable box.

<div class="vertical-scroll">
Place add div content here...
</div>

You can add a class name “scrollable” that we styled a 500px horizontal and vertical scrollable box.

<div class="scrollable">
Place add div content here...
</div>

Styling Browsers Scrollbar with CSS

Now, we’ll just use the CSS -WebKit– extension and target the browser’s built-in selector for the scrollbar. So, select the scrollbar with the -WebKit- prefix and set the width of the scrollbar. It will install the thickness of the scrollbar. You can specify the custom value for the CSS width property (that we defined as 15px) according to your requirements.

<style>
/* scrollbar width */
::-webkit-scrollbar {
  width: 15px;
}
</style>

You can also set the hover effect for the scrollbar thumb. To do so, target the scrollbar thumb with a hover pseudo-selector and specify the CSS style. You can set the custom background color that will show when mouse over the scrollbar thumb.

/* scrollbar Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: green; /*You can change Background Image*/
}

Now, target the “scrollbar-track” with the -WebKit- prefix and set the background color according to your requirements. In the following part, we used a CSS gradient background color that makes the scrollbar track more attractive.

<style>
/* scrollbar Track */
::-webkit-scrollbar-track {
    background: #C9D6FF;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #E2E2E2, #C9D6FF);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #E2E2E2, #C9D6FF); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    border-radius: 10px;
}
</style>

The scrollbar grip is the indicator to show the scrolling region. In CSS, it can be selected using the “scrollbar-thumb”. Describe its background and border-radius for the scrollbar thumb as follows:

<style>
/* scrollbar Handle */
::-webkit-scrollbar-thumb {
    background: #ee0979;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #ff6a00, #ee0979);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #ff6a00, #ee0979); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    border-radius: 10px;
}
</style>

Best Scrollbar Style

<style>
/* width */
::-webkit-scrollbar {
  width: 15px;
}
/* Track */
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px #ddd; 
  border-radius: 15px;
}
/* Handle */
::-webkit-scrollbar-thumb {
  background: orange; 
  border-radius: 15px;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #e30d00; 
}
</style>

That’s all! I hope you have successfully designed the browser’s custom scrollbar using CSS.