Customizing webpage scroll-bar with CSS(without JavaScript)

Although scrollbar has just tiny part on webpage, it can be an important component of the website's design. If you’re true nerd(designer) who care about every details, this short article could be useful.

 

Start off

To customize your website’s scrollbar, the only thing you need are few lines of code in your stylesheet. You don’t even need a single line of JavaScript. You can customize scrollbar with the code snippet below .

/* Customize website's scrollbar like Mac OS, Not supports in IE */

/* total width */
body::-webkit-scrollbar {
    background-color: #fff;
    width: 16px;
}

/* background of the scrollbar, except button or resizer */
body::-webkit-scrollbar-track {
    background-color: #fff;
}

/* scrollbar body */
body::-webkit-scrollbar-thumb {
    background-color: #babac0;
    border-radius: 16px;
    border: 4px solid #fff;
}

/* set button(top & bottom of the scrollbar) */
body::-webkit-scrollbar-button {
    display:none;
}

Customizing scrollbar is non standard method, so you need to use -webkit- vendor prefix to use pseudo-elements above.

 

---

 

Pseudo-Elements

You can also use 7 different pseudo-elements below to customize scrollbar.

::-webkit-scrollbar             {/* entire scrollbar scope */}
::-webkit-scrollbar-button      {/* directional buttons at the top & bottom of the scrollbar */}
::-webkit-scrollbar-track       {/* space below the scrollbar */}
::-webkit-scrollbar-track-piece {/* not covered area by the scrollbar-thumb */}
::-webkit-scrollbar-thumb       {/* draggable scrollbar itself */}
::-webkit-resizer               {/* resizser at the bottom of the scrollbar */}
::-webkit-scrollbar-corner      {/* bottom of the scrollbar without resizse */}

 

I used three pseudo-elememnts: ::-webkit-scrollbar, ::-webkit-scrollbar-track and ::-webkit-scrollbar-thumb for this tutorial. Each propertie needs value inside the brackets like other CSS.

 

 

From my code

I wrote only three lines of CSS code to customize my website’s scrollbar.

body::-webkit-scrollbar       {background-color:#fff;width:16px}
body::-webkit-scrollbar-track {background-color:#fff}
body::-webkit-scrollbar-thumb {background-color:#babac0;border-radius:16px;border:4px solid #fff}

See live example on my website: https://spemer.com, or check my CSS code on my GitHub (line from 75 to 82)

 

---

 

Additional example

If you’re using GitHub Gist code snippets on your own website, It’s available to customize it’s scrollbar either like image below. We can apply this method anywhere if we know the class or ID of the elements, which we’re going to customize them.

.blob-wrapper::-webkit-scrollbar {background-color:#fff;height:4px}
.blob-wrapper::-webkit-scrollbar-track {background-color:#fff}
.blob-wrapper::-webkit-scrollbar-thumb {background-color:#babac0;border-radius:4px}

Gist’s code snippet uses class called .blob-wrapper for it’s scrollbar, so we can customize it with that. Just copy and paste the code snippet above - will make your Gist code snippet’s scrollbar just like the example image.

 

---

 

Can I use?

At this point(in my writing this article today: September 22, 2021), search result on caniuse.com says 97.27% of browsers support for ::-webkit-scrollbar pseudo-elements. You can check the latest report on caniuse.com.

Thanks for reading my article. hope you enjoyed!