How to create a custom scrollbar using CSS?

Although scrollbar has just a small area on the web browser, to me — as an interface designer — it’s not that tiny, nor okay to ignore. If you care about every small detail of the website, this short tutorial would be helpful for you. To customize your website’s scrollbar, there are only a couple of lines of code in your CSS file needed. You don’t even need to write JavaScript to customize it! The following code snippet shows CSS code to customize the web browser’s scrollbar.

::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0);
    background-color: #f00;
}
::-webkit-scrollbar {
    width: 6px;
    background-color: #ff0;
}
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0);
    border-radius: 10px;
    background-color: #ff0;
}

Customizing a web browser’s scrollbar is a non-standard method to styling, so you would like to use -webkit- vendor prefix to use pseudo-elements above. Only Webkit browsers(e.g., Chrome, Safari) support these properties. Other browsers like Firefox or IE don’t support this method.