Customizing Scroll Bar with CSS
This is a tutorial about customizing scroll bar with CSS. I learnt it from Portfolio Site Template by lilykhan. And then I look some tutorials in this repl tutorials section and didn't see any tutorial. So now I present you Customizing Scroll Bar with CSS!
What is Scroll Bar?
Scroll Bar is a bar which you can see at the right side of the website which has a long page. Mostly you can see it in twitter, facebook and instargram.
How a Scroll Bar look like?
A default normal scroll bar look like this:
A scroll bar which has customized look like this:
That scroll bar is from repl.it which is customized.
Customizing
Before starting tutorial I want to remind you that:
!Remember you can only see the scroll bar if the website height is longer than your screen height!
Scroll Bar
Fast of all we need to select the scroll bar. In CSS3 it use
::-webkit-scrollbar
to select the scroll bar.
Now let add width
property.
::-webkit-scrollbar{
width: 10px;
}
Now let add background-color
property.
::-webkit-scrollbar{
width: 10px;
background-color: #000;
}
Can you see a scroll bar thumb??
If you can see tell me in comment that you are a superman or superwoman. LOL XD Just for fun. XD
You can't see the scroll bar thumb. So how can people use your website with touchpad??
That why another selector for it is out.
Scroll bar thumb
The selector code for it in CSS3 is
::-webkit-scrollbar-thumb
Now let add border-radius
property for the thumb to look better.
::-webkit-scrollbar-thumb{
border-radius: 2px;
}
Now let add background-color
property for thumb to be visiable.
::-webkit-scrollbar-thumb{
border-radius: 2px;
background-color: #ff0;
}
Learning more
Scrollbar from CSS Tricks by Sara Cope
How To Style Scrollbars with CSS from Digitalocean by William Le
Thank you for reading.
And look the program for example!
Posted at Feb 2021