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;
}

Tada:

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;
}

Tada:

Learning more

• ::-webkit-scrollbar from MDN Web Docs

• Scrollbar from CSS Tricks by Sara Cope

• How To - Custom Scrollbar from w3schools - How To

• 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