DEV Community

Muhammad Rauf
Muhammad Rauf

Posted on

Create Custom Scroll Bar Using CSS

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

Image description
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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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

<div class="vertical-scroll">
Place your div content here...
</div>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

Best Designed Web Scroll bar.

If you want to add custom scroll bar with hover effect just copy below code and add it to your webpage.

<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>
Enter fullscreen mode Exit fullscreen mode

Want to read in detail from our official website Create Custom Scroll Bar
To SEE DEMO

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

Discussion (6)

Collapse
danielilan profile image
daniel-ilan

Why start with "create custom scrollbar for All browsers using pure css"?
I know you know that Firefox doesn't support webkit extension and this code won't work for it...

Collapse
softcodeon profile image
Muhammad Rauf Author

Yes, I know Firefox doesn't support WebKit. But as you know mostly website users use Google Chrom and Safari. It may help to attract website users.
dev-to-uploads.s3.amazonaws.com/up...

Collapse
Sloan, the sloth mascot
Comment deleted
joeattardi profile image
Joe Attardi

And actually, it's quite easy to support Firefox here as well. See developer.mozilla.org/en-US/docs/W....

Firefox supports the scrollbar-width and scrollbar-color to style its scrollbars as well.

Thread Thread
softcodeon profile image
Muhammad Rauf Author

Great Joe, We can modify custom scroll bar for all browsers and we should do for all. I'll share scroll bar for all browser very soon. Insha Allah

Collapse
arizona profile image
Arizona

You're Doing Great, Please keep it up. Thanks