Scrollbar Styling

Styling Scrollbars

Customize the scrollbar look. Browser-prefixed but widely supported now.

WebKit/Chromium

::-webkit-scrollbar {
  width: 10px;                    /* thickness */
}
::-webkit-scrollbar-track {
  background: #f1f1f1;            /* the background rail */
}
::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover {
  background: #555;
}

Firefox

Simpler:

* {
  scrollbar-color: #888 #f1f1f1;  /* thumb, track */
  scrollbar-width: thin;         /* auto | thin | none */
}

CSS scrollbar-color (standards)

scrollbar-color: hotpink #eee;

Good use cases

• Matching the brand in a dark header.
• Hiding default while keeping visible widget.

TL;DR

• Chromium: ::-webkit-scrollbar parts.
• Firefox: scrollbar-color + scrollbar-width.
• Keep the thumb/track colors distinct enough.
• Use sparsely: default keeps OS consistency for users.