DEV Community

Cover image for How to make Custom Scrollbar using Pure CSS
Nishtha Neeraj Kushwah
Nishtha Neeraj Kushwah

Posted on • Updated on

How to make Custom Scrollbar using Pure CSS

Good Morning Dear Readers

So you are a web developer/designer and you are making awesome websites but the annoying scrollbar is destroying you website.
it can't destroy your website anymore
Because my Friend I'm here for you

So Let's Start

Github: https://github.com/nishthaneeraj/Custom-Srollbar-using-css
Live Demo: https://nishthaneeraj.github.io/Custom-Scroll-Bar-Using-Css/
Codepen:

Specify the width using:

::-webkit-scrollbar {
  width: 10px;
}
Enter fullscreen mode Exit fullscreen mode

then add background color using:

::-webkit-scrollbar-track {
  background-color: #fff;
}
Enter fullscreen mode Exit fullscreen mode

then add the color of the trackbar using:

::-webkit-scrollbar-thumb {
  background-color: #e02f6b;
  border-radius: 5px;
}
Enter fullscreen mode Exit fullscreen mode

that's it !

if you have any issue the let me Know in the Comment Section.

Bye Good Day.

Thanks!

Discussion (0)