Joshua
joshytheprogrammer

joshytheprogrammer

How to style the scrollbar

How to style the scrollbar

In this short blog post, I will show you how to style the scrollbar also know as the overflow section.

Joshua's photo
Joshua
·Aug 3, 2022·

2 min read

Subscribe to my newsletter and never miss my upcoming articles

What is a scrollbar

According to Wikipedia :- A scrollbar is an [interaction technique](en.wikipedia.org/wiki/Interactiontechnique "Interaction technique") or [widget](en.wikipedia.org/wiki/Widget(GUI) "Widget (GUI)") in which continuous text, pictures, or any other content can be [scrolled](en.wikipedia.org/wiki/Scrolling "Scrolling") in a predetermined direction (up, down, left, or right) on a [computer display](en.wikipedia.org/wiki/Computerdisplay "Computer display"), [window](en.wikipedia.org/wiki/Window(computing) "Window (computing)"), or [viewport](en.wikipedia.org/wiki/Viewport "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 me :- 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 :- enter image description here

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 empty space “below” the progress bar
  4. ::-webkit-scrollbar-track-piece is the top-most layer of the 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 scraped from css-tricks. Read their breakdown here

 
Share this