This content originally appeared on DEV Community and was authored by Clément Gaudinière
Hello everyone, today we meet for a new tutorial, as you saw in the title, today I will learn you to customize the scrollbar of a website. This tutorial only works on some web browsers that allow this feature : Google Chrome, Microsoft Edge, Opera, and Safari. Firefox and Internet Explorer do not allow you to customize your scroll bar. But don't worry, just because Firefox and Internet Explorer don't allow this feature doesn't mean it will display poorly, users simply won't be able to see your beautiful scroll bar ?. You're ready, so let's go.
The basics
To customize a scrollbar on a browser, you have to use the pseudo-element ::-webkit-scrollbar, which allows to modify the style of the scrollbar.
To modify a scrollbar, there are about 7 different selectors, some properties being less interesting than others, we will focus on three properties for this tutorial, which are the following :
-
::-webkit-scrollbarwhich represents the entire scrollbar. We can define with this property the width of our scrollbar. -
::-webkit-scrollbar-thumbwhich is the scrollbar. For this pseudo-element, we can apply a multitude of different parameters to apply a style: gradients, colors, border-radius, :hover... -
::-webkit-scrollbar-trackwhich is the track (the progress bar) of the scrollbar, we can apply the background property.
Implementation
Now that we have seen the main properties for styling a scrollbar, we will put into practice what we have just seen through an example.
We will start with a simple HTML base, as follows:
<body>
<h1>I'm the title</h1>
<!-- Put a lot of text here, so that the page has to be scrolled to be seen in full. -->
<p>[YOUR TEXT]</p>
</body>
Let's apply some styling to our Cascading Style Sheet :
body{
background: #252525;
color: white;
margin: 20px 5%;
}
h1{
text-align: center;
}
p{
width: 800px;
max-width: 95%;
text-align: justify;
margin: 0 auto;
}
And we put into practice the different properties seen previously (still in our CSS file ?) :
::-webkit-scrollbar {
width: 10px;
height: 10px;
}
::-webkit-scrollbar-thumb {
background: rgba(8, 8, 8, 0.58);
transition: all 0.15s ease-in-out;
}
::-webkit-scrollbar-track {
background: transparent;
}
You can see the result of our piece of code below, where I replaced the '[YOUR TEXT]' with a Lorem Ipsum :
Finishes
For a cleaner page, we can apply the CSS property overflow: overlay; to our body which will allow our scrollbar to be inside our page.
We will also refine our scollbar by applying a border-radius and a dynamic effect on mouse-over.
You can see the changes in our CSS code below :
body{
overflow: overlay;
background: #252525;
color: white;
margin: 20px 5%;
}
h1{
text-align: center;
}
p{
width: 800px;
max-width: 95%;
text-align: justify;
margin: 0 auto;
}
/* Scrollbar */
::-webkit-scrollbar {
width: 10px;
height: 10px;
}
::-webkit-scrollbar-thumb {
background: rgba(125, 125, 125, 1);
border-radius: 12px;
transition: all 0.15s ease-in-out;
}
::-webkit-scrollbar-thumb:hover {
background: rgba(157, 157, 154, 1);
}
::-webkit-scrollbar-track {
background: transparent;
}
The result with its finishes :
I hope this tutorial has helped you create your custom scrollbar, feel free to give me your feedback in comments ! ?
This content originally appeared on DEV Community and was authored by Clément Gaudinière
Clément Gaudinière | Sciencx (2021-05-16T11:01:55+00:00) Customize the scrollbar on a website. Retrieved from https://www.scien.cx/2021/05/16/customize-the-scrollbar-on-a-website/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.