How to create a custom scrollbar

Scrollbar is a standard piece of almost every website and you already know that. These vertical and horizontal bars allow you to scroll through a website or just a part of it and this differs among browsers. Maybe you don’t even know, but you can easily change the looks of a scrollbar for your website. In this article we’re going to show you how to do that with some CSS.

If you want a simpler solution where you don’t need to play around with the code, see how to customize scrollbars with WordPress plugin.

Before we start, it is important to know that Firefox and Internet Explorer won’t show the changes to your scrollbar. There are different techniques used to change scrollbar styling for these browsers and we won’t be covering them in this article.

Let’s start with a very simple solution. To change styling of your scrollbar, you don’t need much:

  1. Open your style.css
  2. Copy and Paste the following code:
  3. body::-webkit-scrollbar {
    width: 1em;
    }
    
    body::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 1 0 6px rgba(0,0,0,0.3);
    }
    
    body::-webkit-scrollbar-thumb {
    background-color: red;
    outline: 1px solid slategrey;
    }
  4. Save changes.

This code covers the basics. If you want to style your scrollbar even more, these are the seven elements you can play around with.

Elements:

::-webkit-scrollbar – this element is used to describe the background of your scrollbar
::-webkit-scrollbar-button – change the look of the buttons on top and the bottom of the bar
::-webkit-scrollbar-track – track is the “empty” space of the bar
::-webkit-scrollbar-thumb – the moving part of the bar which you can drag up and down (left and right)
::-webkit-scrollbar-track-piece – the top layer which is not covered by the thumb part
::-webkit-scrollbar-corner – place where two scrollbars meet
::-webkit-resizer – resize icon which appear on the corner

Want even more control? Here are 11 selectors which will help you customize your scroll-bar in various states:

Selectors:

:vertical – addresses those parts in the vertical orientation
:horizontal – addresses those parts in the horizontal orientation
:increment – works for buttons and track pieces. Affects the part below or on the left side of the thumb
:decrement – works for buttons and track pieces. Affects the part above or on the right side of the thumb
:start – works for buttons and track pieces. It affects the part above or on the right side of the thumb
:end – works for buttons and track pieces. It affects the part below or on the left side of the thumb
:double-button – works for buttons and track pieces. It finds out if two buttons or tracks are beside each other
:single-button – works for buttons and track pieces. It finds out if a button or track piece is by itself
:no-button – works for track pieces. Finds out if the track piece is at the end of the scrollbar
:corner-present – works for all scrollbar pieces and finds out if there is corner present
:window-inactive – works for all pieces which if the window with the scrollbar is not active

Now, if you really want to customize every part of your scroll-bar, you should combine the elements with the selectors. Here is a random example of what you can do; the following code will change the color of the track which is above or right from the thumb to blue:

body::-webkit-scrollbar-track-piece:start {
background-color: blue;
}

By combining elements and selectors, you have the power to change every bit of the scrollbar. As you can see, you may spend days combining colors, widths and pretty much everything you want.

Now take the codes we have shown you in the article and experiment with different styling until you find the one best for your site.

START YOUR OWN BLOG

This guide is an introduction to mastering the art of blogging. It provides easy to follow steps to start, maintain, and grow your blog.

Read the guide

Leave a Reply

Your email address will not be published. Required fields are marked *