Custom Scrollbar CSS for all Browsers

If you are thinking about styling the browser’s scrollbar then you are in the right place. You may have tried to make a custom scrollbar but did not get the actual output that you were wanted. In this tutorial, you’ll come to know how to create a custom scrollbar for all browsers using pure CSS.

Yes! you heard it right, we are not going to use any scrollbar plugin or custom scrolling function. We’ll just explore 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 compare to scrolling plugins.

The scrollbar styles that we are going to share replace the browser’s default scrollbar styles whether it is a horizontal or vertical scrollbar. You can check this custom scrollbar on the demo page. There you will see two scroll bars, one of them is a page scrollbar and the other is a scrollable section.

How to Create Custom Scrollbar

In order to create a custom scrollbar, you just need to have some scrollable content on your webpage. Basically, you don’t need to create any special HTML for the custom scrollbar. If you have already a scrollbar in your webpage then simply skip the HTML and read the CSS styling guide. Anyhow, if you don’t have any element on your page, you may try the following scrollable box. Just keep some content inside it.

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

Besides this, we created three classes for horizontal, vertical, and both horizontal and vertical scroll. You may add the "horizontal-scroll" class to a div element to make a horizontal scrollable box.

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

Similarly, you can use the "vertical-scroll" class for the vertical scrollable box.

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

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

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

You may also read: Pure CSS parallax scrolling background image.

Styling Browsers Scrollbar with CSS

In order to style the scrollbar, we’ll 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 define the width of the scrollbar. It will set the thickness of the scrollbar. You can define the custom value for the CSS width property (that we defined 15px) according to your needs.

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

Now, target the "scrollbar-track" with the -webkit- prefix and define the background color according to your needs. In the following snippet, we used CSS gradient background color that makes the scrollbar track more attracive.

/* 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;
}

The scrollbar handle is the indicator (also handle to scroll the page with mouse click) to show the scrolling position. In CSS, it can be selected using the "scrollbar-thumb". Define its background and border-radius for scrollbar thumb as follows:

/* 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;
}

You can also set the hover effect for the scrollbar handle/thumb. To do so, target the scrollbar thumb with hover pseudo-selector and specify 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: black;
}

You have completed the scrollbar styling. Moreover, if you wanted to make a div vertically scrollable then you can use the CSS overflow-y property with “scroll” value.

.horizontal-scroll{
  width: 70%;
  height: 400px;
  margin: 0 auto;
  overflow-y: scroll; 
  overflow-x: hidden;
}

Similarly, you can use the overflow-x scroll for the horizontal scroll. You need to define the fixed height and width for the scrollable div.

.vertical-scroll{
  width: 70%;
  height: 400px;
  margin: 0 auto;
  overflow-y: hidden; 
  overflow-x: scroll;
}

The "scrollable" class (that we added in the above HTML) create a 500px box with both horizontal and vertical scroll.

.scrollable{
   overflow: scroll;
   width: 500px;
   height: 500px;
}

That’s all! I hope you have successfully created browsers custom scrollbar using CSS. If you have any questions or suggestions, let me know by comment below.