Create a custom scrollbar

Creating a custom scrollbar is often very useful for those who appreciate frontend development and want to give an original touch to their website. However, what you will see in this article is currently only compatible with Safari and Google Chrome. Your other visitors will continue to see the classic scroll bar.

You can find the entire tutorial on our Instagram account.

Step 1

As we just saw in the introduction to this article, this scrollbar is only available on Safari and Google Chrome: therefore, we specify -webkit- in our CSS file:

body::-webkit-scrollbar {
    width: 10px;
}

Step 2

It's time to define the background color of the scrollbar (the color of the bar itself).

body::-webkit-scrollbar-track {
    background-color: #e5e5e5;
}

Step 3

We have defined the width and color of the bar... Now we will specify the color of the thumb (the small bar that allows scrolling through a page).

body::-webkit-scrollbar-thumb {
    border-radius: 15px;
    background-color: #5c2a9d;
}

Step 4

Final step of this project: define the color of the thumb when hovered. For this, we will use the very famous hover event selector:

body::-webkit-scrollbar-thumb:hover {
    background-color: #b5076b;
}