Quick Introduction

Here’s the quick introduction of what we are doing today. At first, we discuss some of the different parts of a scrollbar and WebKit properties/Selectors.

Then we will check out some of the different states of scrollbar which we can use to customize the scrollbar.

And then we create our very own custom scrollbar and we will also check out some of the custom scrollbar examples.

Everything about custom scrollbar

We must agree that the default scrollbar looks ugly. And it looks even uglier when you using a dark theme in your web design. So we always want to change the default scrollbar and customize accordingly.

Different parts of Scrollbar

Learn to create Custom Scrollbar: which looks awesome 2 » Csspoint101
  • Scrollbar Track: The complete inner hollow area is known as scrollbar track
  • Scrollbar Button: The upper top arrow icon is known as button
  • Scrollbar Thumb: The main scroll-able part of a scrollbar is known as thumb
  • Scrollbar Track Piece: The area left after thumb is known as a track piece

Custom Scrollbar (::WebKit) Selectors/properties

  • ::-webkit-scrollbar the scrollbar.
  • ::-webkit-scrollbar-button the buttons on the scrollbar (arrows pointing upwards and downwards).
  • ::-webkit-scrollbar-thumb the draggable scrolling handle.
  • ::-webkit-scrollbar-track the track (progress bar) of the scrollbar.
  • ::-webkit-scrollbar-track-piece the track (progress bar) NOT covered by the handle.
  • ::-webkit-scrollbar-corner the bottom corner of the scrollbar, where both horizontal and vertical scrollbars meet.
  • ::-webkit-resizer the draggable resizing handle that appears at the bottom corner of some elements.

Important Scrollbar states

:horizontal- The horizontal pseudo-class applies to any scrollbar pieces that have a horizontal orientation.

:vertical- The vertical pseudo-class applies to any scrollbar pieces that have a vertical orientation.

:double-button- The double-button pseudo-class applies to buttons and track pieces. It is used to detect whether a button is part of a pair of buttons that are together at the same end of a scrollbar.

:single-button- The single-button pseudo-class applies to buttons and track pieces. It is used to detect whether a button is by itself at the end of a scrollbar. 

:no-button- applies to track pieces and indicates whether or not the track piece runs to the edge of the scrollbar, i.e., there is no button at that end of the track.

:increment- The decrement pseudo-class applies to buttons and track pieces. It indicates whether or not the button or track piece will increment the view’s position when used

:decrement- The increment pseudo-class applies to buttons and track pieces. It indicates whether or not a button or track piece will decrement the view’s position when used

:window-inactive- Applies to all scrollbar pieces and indicates whether or not the window containing the scrollbar is currently active. 

Learn more about Webkit properties related to Scrollbar: Visit

Here’s what we are creating

Learn to create Custom Scrollbar: which looks awesome 3 » Csspoint101

HTML For Custom Scrollbar

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Custom Cursor</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="main">
        <h1>Csspoint101</h1>
    </div>
    <div class="cards">
        <div class="card">
            <p class="text">
                Lorem ipsum dolor sit amet consectetur adipisicing elit.
                 Nam ratione at aliquid corrupti, laborum architecto recusandae
                  ullam molestiae sunt, quam deserunt repudiandae voluptatem,
                   distinctio magnam laboriosam sed consequatur similique expedita.
            </p>
        </div>
        <div class="card">
                <p class="text">
                        Lorem ipsum dolor sit amet consectetur adipisicing elit.
                         Nam ratione at aliquid corrupti, laborum architecto recusandae
                          ullam molestiae sunt, quam deserunt repudiandae voluptatem,
                           distinctio magnam laboriosam sed consequatur similique expedita.
                    </p>
        </div>
        <div class="card">
                <p class="text">
                        Lorem ipsum dolor sit amet consectetur adipisicing elit.
                         Nam ratione at aliquid corrupti, laborum architecto recusandae
                          ullam molestiae sunt, quam deserunt repudiandae voluptatem,
                           distinctio magnam laboriosam sed consequatur similique expedita.
                    </p>
        </div>
        <div class="card">
                <p class="text">
                        Lorem ipsum dolor sit amet consectetur adipisicing elit.
                         Nam ratione at aliquid corrupti, laborum architecto recusandae
                          ullam molestiae sunt, quam deserunt repudiandae voluptatem,
                           distinctio magnam laboriosam sed consequatur similique expedita.
                    </p>
        </div>
        <div class="card">
                <p class="text">
                        Lorem ipsum dolor sit amet consectetur adipisicing elit.
                         Nam ratione at aliquid corrupti, laborum architecto recusandae
                          ullam molestiae sunt, quam deserunt repudiandae voluptatem,
                           distinctio magnam laboriosam sed consequatur similique expedita.
                    </p>
        </div>
        <div class="card">
                <p class="text">
                        Lorem ipsum dolor sit amet consectetur adipisicing elit.
                         Nam ratione at aliquid corrupti, laborum architecto recusandae
                          ullam molestiae sunt, quam deserunt repudiandae voluptatem,
                           distinctio magnam laboriosam sed consequatur similique expedita.
                    </p>
        </div>
        
        </div>
        </body>
</html>

CSS For Custom Scrollbar

*{
    margin: 0%;
    padding: 0%;
    box-sizing: border-box;
}
body{
    background-color: rgb(24, 23, 23);
}
.cards{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.card{
    font-family: 'Segoe UI'sans-serif;
    color: white;
    border: 1px solid grey;
    padding: 30px;
    margin: 20px;
    font-size: 1.1em;
    
    border-radius: 10px;
}
.card:nth-child(even){
    background-color: rgb(51, 48, 48);
}

.main{
    text-align: center;
    color: white;
}

/* Scrollbar Design */
/* width */
::-webkit-scrollbar {
    width: 20px;
  }
 
  /* Track */
  ::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px grey;
    border-radius: 10px;
  }
  
  /* Handle */
  ::-webkit-scrollbar-thumb {
    background: linear-gradient(0deg, rgba(32,252,255,1) 0%, rgba(212,242,61,1) 100%);
    border-radius: 10px;
  }

Other Custom Scrollbar Examples(with code)

See the Pen Customize the Browser’s Scrollbar with CSS by akinjide (@akinjide) on CodePen.

See the Pen customize-scrollbar by Hyouk Seo (@Spemer) on CodePen.

YouTube Videos Tutorials

Credit: Coding Artist

If you find this article on Custom Scrollbar helpful, do share it with others. And also check out articles on- Awesome Parallax On Hover Effect or 3D Tilt-Shift Effect or 45+ CSS Glitch Effect.