Custom scrollbars are getting popular, and you might have come across websites that have unique scrollbars, making the sites feel and look different. There are basically a few ways to implement a custom scrollbar.
In this tutorial we will be using CSS3, which is the most straightforward way. However, there are jQuery plugins that can help with customizing scrollbar, but I do not like to add more JavaScript to my website. If you are a designer, photographer or you just want your website to have a cool scrollbar, go ahead with the jQuery plugins.
Custom scrollbars are exposed behind the -webkit
vendor prefix for use in browsers using the Webkit (and Blink) rendering engine.
-webkit-scrollbar
consists of seven different pseudo-elements, and together comprise a full scrollbar UI element:
::-webkit-scrollbar
the background of the bar itself.::-webkit-scrollbar-button
the directional buttons on the scrollbar.::-webkit-scrollbar-track
the empty space “below” the progress bar.::-webkit-scrollbar-track-piece
the top-most layer of the the progress bar not covered by the thumb.::-webkit-scrollbar-thumb
the draggable scrolling element resizes depending on the size of the scrollable element.::-webkit-scrollbar-corner
the bottom corner of the scrollable element, where two scrollbar meet.::-webkit-resizer
the draggable resizing handle that appears above the scrollbar-corner at the bottom corner of some elements.Now that you are familiar with the terminologies, let’s start!
First, create index.html
and style.css
files, and open the current directory with your code editor.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Customize the Browser's Scrollbar with CSS</title>
<link type="text/css" rel="stylesheet" href="styles.css">
</head>
<body>
<div class="scrollbar" id="style-1">
<div class="force-overflow"></div>
</div>
</body>
</html>
You’ll need to include the style.css
file in the HTML file. You can type out the above HTML code or just copy and paste into your HTML file.
Firstly, we set the .scrollbar
(class) width, height, background-color
, then set overflow-y: scroll
to get the vertical scrollbar. We set min-height: 450px
to the .force-overflow
div so that the scrollbar appears (because we used the overflow-y
property to scroll in .scrollbar
class).
.scrollbar {
background-color: #F5F5F5;
float: left;
height: 300px;
margin-bottom: 25px;
margin-left: 22px;
margin-top: 40px;
width: 65px;
overflow-y: scroll;
}
.force-overflow {
min-height: 450px;
}
Now, we use the scrollbar pseudo-element for creating our custom scrollbar. It will replace its default width with a new width of 6px
and then add background-color: #F5F5F5
.
#style-1::-webkit-scrollbar {
width: 6px;
background-color: #F5F5F5;
}
Since we know that scrollbar contains track
, button
and thumb
, we are now going to give a stylish look to thumb. We use pseudo-element (i.e., ::-webkit-scrollbar-thumb
) with -webkit
prefix and set scrollbar-thumb background- color
.
#style-1::-webkit-scrollbar-thumb {
background-color: #000000;
}
After that, the scrollbar looks like this:
We use box-shadow
on scrollbar-track
to make it stylish and add contrast between the scrollbar and scrollbar-track.
#style-1::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
background-color: #F5F5F5;
}
In this article, we covered:
-webkit
vendor prefix.The CSS way of customizing scrollbars is simple, but looks a bit rough. However, operating systems like Windows, OS X and Linux have their own style for the scrollbar. This in return could lead to undesirable results and inconsistencies for your design. Remember, you should keep it simple, stupid (KISS), not too fancy.
I have created more scrollbars using the above procedure. I made use of codePen for the demo, and you can find the full code for this tutorial on CodePen.
That’s all. I hope you like it!
Make sure to leave any thoughts, questions or concerns in the comments below. I would love to see them.
Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.
While we believe that this content benefits our community, we have not yet thoroughly reviewed it. If you have any suggestions for improvements, please let us know by clicking the “report an issue“ button at the bottom of the tutorial.
This textbox defaults to using Markdown to format your answer.
You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!