You must have noticed some websites having cool and unique scrollbars. Some might be sleek with the colors that blend perfectly with the website and others are just to enhance the user experience.

Well, it’s achieved with the help of new webkit CSS scrollbar properties (unfortunately, which only works with the webkit based browsers) and a Jquery library, for almost all web browsers out there. So, let’s hop into coding stuff and perform the scrollbar styling.

Like I have already said, the CSS properties are build for the webkit based browsers and so, these include Google chrome for Desktop and mobile, Apple Safari, Flock, OmniWeb Web browsers. Even if you design only for them, I mean avoid the need to learn and implement Jquery, you could cover 72% of the web users.

That still great, but if you are not allergic of some Jquery coding, you can ensure that every single visitor on your website sees a beautifully styled scrollbar.

Not just the main window scrollbar styling

Scroll bars can be found anywhere where the length of content exceeds the width of the container window. So that means, you get an option to style iframe window, div elements, and input text area fields. In iframe and text area windows, browsers automatically append a scrollbar at the bottom as the content that flows out of the visible region.

However, in containers, you need to provide extra information to browsers. Setting the overflow CSS property to scroll will command to browsers to show scrollbars for the overflowing content.

//Container with some overflowing content
.container {
    width: 100px;
    height: 100px;
    overflow: scroll; //This does our work
}

This would show the scrollbars like this (Right)

With and without overflow property - Custom scrollbar styling with CSS

Using CSS pseudo properties to customize -webkit browser’s scrollbars.

Way back in the IE era, IE5.5 was the first browser to support basic styling for the scrollbars. However, it was limited just to the colors. Using the scrollbar-face-color property, you could change their display color. Though this wouldn’t create a lot of difference, it is still better than the browser’s default scrollbar. Since this property is still supported in Internet explorer, you have got a clever trick for your traditional IE users.

But since we’re talking about webkit browsers, and we have CSS so you get lots of styling options to choose, like changing the colors and widths of scrollbars, trackers, and thumbs. The elements of scrollbar can be selected using the following CSS pseudo-properties.

  1. ::webkit-scrollbar – This pseudo property will let you customize the default scrollbar in terms of width and color.When this pseudo-element is present, WebKit will turn off its built-in scrollbar rendering and just use the information provided in CSS. Please note, this will select all the scrollbars present on the page. If you want to customize the scrollbars for a specific element, you need to apply this pseudo-property to a particular element you wish to style.
/* For all the scrollbars */
::-webkit-scrollbar {
    width: 8px;
    background-color: #F5F5F5;
}

/* For specific scrollbar */
.mybox::-webkit-scrollbar {
    width: 12px;
    background-color: #434343;
}
  1. ::-webkit-scrollbar-thumb – The thumb of the scrollbar is the one which you hold and scroll the page. It can have a solid color or a gradient as a background. You can do it like this,
::-webkit-scrollbar-thumb {
    width: 8px;
    background-image: -webkit-linear-gradient(#F5F5F5, #8A8A8A);
}
  1. ::-webkit-scrollbar-track – It lets you customize the track of the scrollbar. In layman terms, the track of the scrollbar is the path of the movement of the scroll thumb. The syntax for scrollbar track is,
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    border: 1px solid black;
    background-color: #F5F5F5;
}
  1. ::-webkit-scrollbar-button – The developers of CSS3 haven’t overlooked the small buttons at the end of  the scrollbar. You can customize them too and why not, they are important as well (Helpful when the page is lengthy and so scrollbar becomes too much tiny to scroll around). This property would style the top and bottom corners (or left and right for horizontal scrollbars)
::-webkit-scrollbar-button {
    background-color: #7c2929;
}
  1. ::-webkit-scrollbar-corner – Last but not the least, CSS gives you an option to beautifully handle the situation, when both the scroll bar show up and meet at the corner.
::-webkit-scrollbar-corner {
    background-color: #b3b3b3;
}

Here are some examples that will show you the power of scroll bar property. You can view the code for the same by switching between the tabs. Since this is for webkit browsers, it won’t require any line of Javascript. This example has been referred from CSS Deck.

See the Pen Custom Scrollbar styling by Devstreak (@devstreak) on CodePen.


The Jquery way to style scrollbars.

If you love front-end programming, you can use a Jquery plugin called jScrollPane, developed by Kelvin luck. jScrollPane as said, is quite easy to use. After you have downloaded and included the relevant files in the head of your document all you need to do is call one javascript function to initialize the scroll pane. You can style the resultant scrollbars easily with CSS or choose from some of the existing themes.

You can directly style for both webkit and non-webkit browsers through it. So I would advise you to use this to save time and cover all browsers in one shot. All the required files can be found in the jScrollPane package.

<link rel="stylesheet" type="text/css" href="jquery.jscrollpane.css" />

<!-- jQuery file from Google CDN -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

<!-- the jScrollPane script -->
<script type="text/javascript" src="jquery.jscrollpane.min.js"></script>

<script type="text/javascript">
    $(document).ready(function () {
        $('.container').jScrollPane();
    }
});
</script>

Now if you want to edit the default customizations provided by jScrollPane, you can edit the styles of corresponding elements.

.jspTrack {
    background: #b46868;
    position: relative;
}

.jspDrag {
    background: #c43232;
    position: relative;
    cursor: pointer;
}

You can learn more about the jScrollPane and other projects of Kelvin Luck at his official website. Don’t miss out his brilliant creations.

Conclusion

Customized scrollbars aren’t uncommon anymore. You would find them in the majority of websites and blogs, especially in personal Portfolio websites. With jScrollPane it has become much easier to create and display custom styled scrollbars on almost all web browsers.

I Hope you find this tutorial informative. Do you prefer custom styled scrollbars on your website? Share your comments and thoughts with us.

Share on Facebook Tweet on Twitter Post on Google+ Buffer