How to make custom scrollbars with CSS

The vendor prefixed properties are pseudo-elements. See the available seven properties below and their parts pointed.

::webkit-scrollbar  {/*....1*/}
::webkit-scrollbar-button  {/*....2*/}
::webkit-scrollbar-track {/*....3*/}
::webkit-scrollbar-track-piece {/*....4*/}
::webkit-scrollbar-thumb  {/*....5*/}
::webkit-scrollbar-corner  {/*....6*/}
::webkit-resizer {/*....7*/}

The above properties have pseudo-classes selectors which are given below:

: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.

:decrement - The decremnt pseudo-class applies to buttons and track pieces. It indicates whether or not the button or track piece will decrement the view's position when used (e.g., up on a vertical scrollbar, left on a horizontal scrollbar).

:increment - The increment 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 (e.g., down on a vertical scrollbar, right on a horizontal scrollbar).

:start - The start pseudo-class applies to buttons and track pieces. It indicates whether the object is placed before the thumb.

:end - The end pseudo-class applies to buttons and track pieces. It indicates whether the object is placed after the thumb.

: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. For track pieces it indicates whether the track piece abuts a pair of buttons.

: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 same end of a scrollbar. For track pieces it indicates whether the track piece abuts a singleton button.

: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.

:corner-present - Applies to scrollbar pieces and indicates whether or not a scrollbar corner is present.

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

In addition, the :enabled, :disabled, :hover, and :active pseudo-classes also work with scrollbar pieces.

Joining the pieces now

Here are some examples where we can use pseudo elements and pseudo class selectors together.

::webkit-scrollbar-track-piece:start {
    /* Select the top half (or left half) or scrollbar track individually */
}

::webkit-scrollbar-thumb:window-inactive {
    /* Select the thumb when the browser window isn't in focus */
}

::webkit-scrollbar-button:horizontal:decrement:hover {
    /* Select the down or left scroll button when it's being hovered by the mouse */
}

Here is simple exampe that is applied to this website.

/***** Scrollbar CSS *****/
body::-webkit-scrollbar {
    width: 0.5em;
}

body::-webkit-scrollbar-track {
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}

body::-webkit-scrollbar-thumb {
    background-color: #00acd6;
    outline: 1px solid slategrey;
    border-radius: 8px;
}

With the above you'd get a scrollbar exactly like you see in this website (at right side). Have a try!

Note: This works only on chromium based browsers!