How to create a custom scrollbar using CSS?

ARyan MAurya
November 12, 2020
No Comments

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.

Post your comment

Your email address will not be published. Required fields are marked *