Create Custom ScrollBar in CSS

In this HTML and CSS tutorial, I will show you how to customize the scroll bar without using any JavaScript files. You will be able to create scroll bar in the color and style you want. First, we will have two files, index.html and style.css. Let’s add basic HTML codes to index.html immediately.

We linked style.css to index.html page with link tag. Since our purpose in this tutorial is to replace the scroll bar, I need to add a paragraph to reveal the ScrollBar. Let’s do this right away with the P tag, by adding Dummy Text to it. This is how we add Dummy Texts. And when I save this file, you will see scroll bar on the right side.

Now let’s open the style CSS file to customize this scroll bar. First of all, I added a body tag and gave the margins to make the page look nicer. I increase the line spacing. Now let’s use the justify codes, where we justify the texts on both sides. So it will look more organized. Now that we have prepared the page in general, we can move on to customizing the ScrollBar.

To customize the ScrollBar, we will use some codes on CSS and try these codes to see what they do. First we add the Webkit ScrollBar feature that covers the scrollbar in general. We can apply different parameters to this property, let’s start with the Background first. When we assign black color to the Background property, the scroll bar will be black as you can see here. The point where we hold the scroll bar will not be visible at the moment, because right now we haven’t determined it yet. Here I choose a color for the ScrollBar color. Let’s add a color like this and we’ll make the slider even darker. Now let’s set its width. We will use the width value, if you want it to be thin, we can use 10 pixels or if we want it to be thicker, we can increase the number here. Keep it around 14 for now.


body {
    margin: 40px;
    line-height: 24px;
}

p {
    text-align: justify;
}

::-webkit-scrollbar {
    background: #95a5a6;
    width: 14px;
}

::-webkit-scrollbar-thumb {
    background: #2c3e50;
}

Now let’s come to the place where we click the scroll bar with the mouse. In order to use this feature, we need to add the text webkit-scrollbar-thumb. We can assign a color to it. For example, I copy this color from the options and paste this color in the background section. Let’s see what the results looks like. As you can see in this place, we hold with the mouse, the color appeared with our assignments. In general, the scroll bars changing logic, customization logic is like this. You can customize it even more with the CSS code you add here.

For example, let’s say you don’t want this edge of the scroll bar to be square. We can give it border radius. As you can see, when I give a 10 pixels border radius, you will see that this scroll bar has rounded corners. You can also customize the scroll bar with these types of edits.

You may also not want to use any color in the scroll bar area in the background. When you want to make this part transparent, we can remove the background part and ensure that there is no color here. In this case, only the scroll bar itself will be visible.

Popular Tutorials

How to Create Animated Image Carousel with CSS

In this tutorial, I’ll show you how to create animated image carousel,…

5 Awesome VS Code Plugins Useful in HTML

I have been using VS Code for a while now and I…

Animated SVG Icons | SVG Stroke Animation jQuery

How to use animated SVG on your website? How about animating eye-catching…

Create Custom ScrollBar in CSS

In this HTML and CSS tutorial, I will show you how to…

VS Code Live Server and Perfect Browser Auto Refresh Feature

In this VS Code tutorial, we are going to take a look…

Animated Colorful Gradient Background with CSS

With CSS, you can do many things to add color to your…