How to style the scrollbar

What is a scrollbar

According to Wikipedia:- A scrollbar is an interaction technique or widget in which continuous text, pictures, or any other content can be scrolled in a predetermined direction (up, down, left, or right) on a computer display, window, or viewport so that all of the content can be viewed, even if only a fraction of the content can be seen on a device's screen at one time.

According to joshytheprogrammer, "A scrollbar is that line on the right side of the browser that allows users to scroll through the page. It can be added or removed using the overflow property"

Usage Example

::-webkit-scrollbar {
    width: 8px;
}

/* Track */
::-webkit-scrollbar-track {
    background: #FBFFfE;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #230903;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #000;
}

The following will result in:-

Explanation

The -webkit-scrollbar family of properties consists of seven different pseudo-elements that, together, comprise a full scrollbar UI element:

1. ::-webkit-scrollbar addresses the background of the bar itself. It is usually covered by the other elements

2. ::-webkit-scrollbar-button addresses the directional buttons on the scrollbar

3. ::-webkit-scrollbar-track addresses the space “below” the progress bar

4. ::-webkit-scrollbar-track-piece is the top-most layer of the progress bar not covered by the draggable scrolling element (thumb)

5. ::-webkit-scrollbar-thumb addresses the draggable scrolling element that resizes depending on the size of the scrollable element

6. ::-webkit-scrollbar-corner addresses the (usually) bottom corner of the scrollable element, where two scrollbars might meet

7. ::-webkit-resizer addresses the draggable resizing handle that appears above the scrollbar-corner at the bottom corner of some elements

The explanation section was gotten from CSS-tricks. Read their full breakdown here.