CSS Scrollbar Styling
Styling scrollbars has historically been fragmented between different browser engines. However, a new standard specification is emerging that simplifies this process, while legacy methods are still needed for full cross-browser support.
1. The Standard (Firefox & Modern Browsers)
The modern standard (CSS Scrollbars Module Level 1) provides a simple way to style scrollbars using two properties. This is currently supported in Firefox and Chromium-based browsers (Chrome 121+).
scrollbar-width: Controls the width of the scrollbar.auto: Default width.thin: A thinner scrollbar.none: Hides the scrollbar (but the element remains scrollable).
scrollbar-color: Sets the color of the scrollbar thumb and track.- Syntax:
scrollbar-color: <thumb-color> <track-color>;
- Syntax:
/* Modern Syntax */
.scroller {
scrollbar-width: thin;
scrollbar-color: #888 <a href='/?search=%23f1f1f1' class='obsidian-tag'>#f1f1f1</a>; /* Thumb Track */
}2. The Legacy Way (Webkit - Chrome, Edge, Safari)
For older versions of Chrome, Edge, and Safari, you must use the non-standard ::-webkit-scrollbar pseudo-elements. These offer much more granular control but are more verbose.
::-webkit-scrollbar: The scrollbar itself (width/height).::-webkit-scrollbar-track: The track (background).::-webkit-scrollbar-thumb: The draggable handle.::-webkit-scrollbar-thumb:hover: The handle on hover.
/* Legacy Webkit Syntax */
.scroller::-webkit-scrollbar {
width: 10px; /* Width of vertical scrollbar */
height: 10px; /* Height of horizontal scrollbar */
}
.scroller::-webkit-scrollbar-track {
background: <a href='/?search=%23f1f1f1' class='obsidian-tag'>#f1f1f1</a>;
}
.scroller::-webkit-scrollbar-thumb {
background: #888;
border-radius: 5px;
}
.scroller::-webkit-scrollbar-thumb:hover {
background: #555;
}3. Cross-Browser Strategy
To support all browsers, you should combine both methods.
.scroller {
/* Firefox & Modern Chrome/Edge */
scrollbar-width: thin;
scrollbar-color: #888 <a href='/?search=%23f1f1f1' class='obsidian-tag'>#f1f1f1</a>;
}
/* Legacy Webkit (Chrome, Safari, Edge) */
.scroller::-webkit-scrollbar {
width: 8px;
}
.scroller::-webkit-scrollbar-track {
background: <a href='/?search=%23f1f1f1' class='obsidian-tag'>#f1f1f1</a>;
}
.scroller::-webkit-scrollbar-thumb {
background-color: #888;
border-radius: 4px;
border: 2px solid <a href='/?search=%23f1f1f1' class='obsidian-tag'>#f1f1f1</a>; /* Creates padding around thumb */
}4. Hiding Scrollbars
Sometimes you want an element to be scrollable but without a visible scrollbar.
.hide-scrollbar {
/* Firefox */
scrollbar-width: none;
/* IE 10+ */
-ms-overflow-style: none;
}
/* Webkit */
.hide-scrollbar::-webkit-scrollbar {
display: none;
}programming/css/css programming/css/pseudo-classes-and-pseudo-elements