The scrollbar
set of CSS properties is a proprietary style hook from Internet Explorer 5.5, which let designers create custom themes for the browser’s native scrollbars. Currently, it is exposed behind the -webkit
vendor prefix for use in browsers using the Webkit (and Blink) rendering engine. This almanac entry is an overview, for a more complete breakdown of working with custom scrollbars, please read this CSS-Tricks article.
body::-webkit-scrollbar {
width: 1em;
}
body::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}
body::-webkit-scrollbar-thumb {
background-color: darkgrey;
outline: 1px solid slategrey;
}
The -webkit-scrollbar
family of properties consists of seven different pseudo-elements that, together, comprise a full scrollbar UI element:
::-webkit-scrollbar
addresses the background of the bar itself. It is usually covered by the other elements::-webkit-scrollbar-button
addresses the directional buttons on the scrollbar::-webkit-scrollbar-track
addresses the empty space “below” the progress bar::-webkit-scrollbar-track-piece
is the top-most layer of the the progress bar not covered by the draggable scrolling element (thumb)::-webkit-scrollbar-thumb
addresses the draggable scrolling element that resizes depending on the size of the scrollable element::-webkit-scrollbar-corner
addresses the (usually) bottom corner of the scrollable element, where two scrollbars might meet::-webkit-resizer
addresses the draggable resizing handle that appears above thescrollbar-corner
at the bottom corner of some elements