CSS Scrollbars

While standard CSS has properties like overflow, styling scrollbars is essentially done using vendor-specific pseudo-elements (mainly WebKit for Chrome, Safari, Edge).

Overflow Property

The overflow property specifies what should happen if content overflows an element's box.

• visible: Default. The overflow is not clipped.
• hidden: The overflow is clipped, and the rest of the content will be invisible.
• scroll: The overflow is clipped, and a scrollbar is added to see the rest of the content.
• auto: Similar to scroll, but it typically adds scrollbars only when necessary.

Styling Scrollbars (WebKit)

You can use the following pseudo-elements to customize scrollbars in WebKit browsers:

• ::-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-corner: The bottom corner of the scrollbar, where both horizontal and vertical scrollbars meet.

/* Width */
::-webkit-scrollbar {
  width: 10px;
}

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

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

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