How To Create Custom Scrollbar in CSS
In this HTML and CSS tutorial, I will show you how to customize the scrollbar 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.
body {
margin: 40px;
line-height: 24px;
}
p {
text-align: justify;
}
::-webkit-scrollbar {
background: #95a5a6;
width: 14px;
}
::-webkit-scrollbar-thumb {
background: #2c3e50;
}
To customize the Scroll bar, we will use some codes on CSS. We add the webkit-scrollbar feature that covers the scrollbar in general. We can apply different parameters to this property.
Popular Tutorials
I have been using VS Code for a while now and I…
How to use animated SVG on your website? How about animating eye-catching…
Have you ever wondered what those mysterious status codes that appear in…
Image carousels are a great way to display multiple images in a…
The animated underline effect is a popular design trend that can add…
In this video, we’ll guide you through creating stunning image hover effects…