UGLY SCROLLBARS: MAKING BEAUTIFUL SCROLLBARS USING WEBKIT

By: Saurav

2017-11-07 02:32:00 UTC

When you are working with a web app which has divs having fixed height, and you want a more compact design, you need a scroll bar.
Problem with having scrollbars within a webpage apart from the one on the right side is its ugly. I don't really know why default scrollbars are kept ugly by default. White webpage and grey scroll bar? Cmon! You can do better.

While working with an ongoing work project, I recently found a really slick solution using webkit -scrollbar and wanted to share it with you.

This is how it looks before hand:

Css1

Like yuck dude go take a shower!

Having one scrollbar at the right for the whole page is tolerable because its not in our sight most of the time and our brain and eyes ignore it. (Out of sight, out of mind)

But fixed sized divs, compact design and single page websites, used everywhere nowadays speaks for a more dire need for better, beautiful css applied to these scroll bars.

Css2

How about something like the one on the top ? Goes with our website palette and looks good doesn't it ?

So, how to customize your scrollbar ?

I am not gonna take credit for the idea and the codes used. I have tried it before and the most comprehensive and easy to understand post for me was this at beautifulpixel.com

But I will tell you what I did.

For this to work efficiently, we need an absolute position for the body, a top,left, bottom as 0 and a right as 10px (say for this case).

For html, we need to specify overflow-y as auto, and background color as transparent

body {
    font-size: 14px;
    margin: 0;
    width: 100%;    
    font-family: 'Oswald', sans-serif;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 10px;
    overflow-y: scroll;
    overflow-x: hidden;
  }

  html{
    overflow-y: auto;
    background-color: transparent;
  }

Now, handling the scrollbar elements with webkit:


Style the scrollbar : 

::-webkit-scrollbar {
    width: 6px;
    height: 10px;
    }

Style the buttons of the scrollbar. The up and down arrows. I choose a height of 0px so scollbar can go all the way up and down. But you can choose some height to restrict how far it travels vertically: 

    ::-webkit-scrollbar-button:start:decrement,
    ::-webkit-scrollbar-button:end:increment  {
    height: 0px;
    display: block;
    background-color: transparent;
    }

Style the Background track on which the scrollbar moves. I chose a white one because my palette color has more white:

    ::-webkit-scrollbar-track-piece  {
    background-color: #fff;
    -webkit-border-radius: 6px;
    }

Style the scrollbar thumb which you pick and drag with. I chose a border color similar to the thumb color and a very low radius so the footer and scoll thumb will be undifferentiated when I will be at the bottom end as shown in the pic below. You are free to play with it: 

::-webkit-scrollbar-thumb:vertical {
    height: 50px;    
    background-color: #F00000;
    border: 0.5px solid #F00000;
    -webkit-border-radius: 2px;
    }


Css4

And that's how you do it.

You would have seen these custom scrollbars at many places. Check out this pizza hut location chooser custom scrollbar in the pic below.

Now you know how to style those scrollbars, have fun! :)

Css6

Owned & Maintained by Saurav Prakash

If you like what you see, you can help me cover server costs or buy me a cup of coffee though donation :)