::-webkit-scrollbar
Non-standard: This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.
The ::-webkit-scrollbar
CSS pseudo-element affects the style of an element's scrollbar when it has scrollable overflow.
The scrollbar-color
and scrollbar-width
standard properties may be used as alternatives for browsers that do not support this pseudo-element and the related ::-webkit-scrollbar-*
pseudo-elements (see Browser compatibility).
Note:
If scrollbar-color
and scrollbar-width
are supported and have any value other than auto
set, they will override ::-webkit-scrollbar-*
styling.
See Adding a fallback for scrollbar styles for more details.
CSS Scrollbar Selectors
You can use the following pseudo-elements to customize various parts of the scrollbar for WebKit browsers:
::-webkit-scrollbar
— the entire scrollbar.::-webkit-scrollbar-button
— the buttons on the scrollbar (arrows pointing upwards and downwards that scroll one line at a time).::-webkit-scrollbar:horizontal{}
— the horizontal scrollbar.::-webkit-scrollbar-thumb
— the draggable scrolling handle.::-webkit-scrollbar-track
— the track (progress bar) of the scrollbar, where there is a gray bar on top of a white bar.::-webkit-scrollbar-track-piece
— the part of the track (progress bar) not covered by the handle.::-webkit-scrollbar:vertical{}
— the vertical scrollbar.::-webkit-scrollbar-corner
— the bottom corner of the scrollbar, where both horizontal and vertical scrollbars meet. This is often the bottom-right corner of the browser window.::-webkit-resizer
— the draggable resizing handle that appears at the bottom corner of some elements.
Accessibility
Authors should avoid styling scrollbars, as changing the appearance of scrollbars away from the default breaks external consistency which negatively impacts usability. If styling scrollbars, ensure there is enough color contrast and touch targets are at least 44px wide and tall. See Techniques for WCAG 2.0: G183: Using a contrast ratio of 3:1 and Understanding WCAG 2.1 : Target Size.
Examples
Styling scrollbars using -webkit-scrollbar
CSS
.visible-scrollbar,
.invisible-scrollbar,
.mostly-customized-scrollbar {
display: block;
width: 10em;
overflow: auto;
height: 2em;
padding: 1em;
margin: 1em auto;
outline: 2px dashed cornflowerblue;
}
.invisible-scrollbar::-webkit-scrollbar {
display: none;
}
/* Demonstrate a "mostly customized" scrollbar
* (won't be visible otherwise if width/height is specified) */
.mostly-customized-scrollbar::-webkit-scrollbar {
width: 5px;
height: 8px;
background-color: #aaa; /* or add it to the track */
}
/* Add a thumb */
.mostly-customized-scrollbar::-webkit-scrollbar-thumb {
background: #000;
}
HTML
<div class="visible-scrollbar">
<h3>Visible scrollbar</h3>
<p>
Etiam sagittis sem sed lacus laoreet, eu fermentum eros auctor. Proin at
nulla elementum, consectetur ex eget, commodo ante. Sed eros mi, bibendum ut
dignissim et, maximus eget nibh. Phasellus blandit quam turpis, at mollis
velit pretium ut. Nunc consequat efficitur ultrices. Nullam hendrerit
posuere est. Nulla libero sapien, egestas ac felis porta, cursus ultricies
quam. Vestibulum tincidunt accumsan sapien, a fringilla dui semper in.
Vivamus consectetur ipsum a ornare blandit. Aenean tempus at lorem sit amet
faucibus. Curabitur nibh justo, faucibus sed velit cursus, mattis cursus
dolor. Pellentesque id pretium est. Quisque convallis nisi a diam malesuada
mollis. Aliquam at enim ligula.
</p>
</div>
<div class="invisible-scrollbar">
<h3>Invisible scrollbar</h3>
<p>
Thisisaveeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeerylongword
</p>
</div>
<div class="mostly-customized-scrollbar">
<h3>Custom scrollbar</h3>
<p>
Thisisaveeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeerylongword<br />
And pretty tall<br />
thing with weird scrollbars.<br />
Who thought scrollbars could be made weird?
</p>
</div>
Result
Adding a fallback for scrollbar styles
You can use a @supports
at-rule to detect if a browser supports the standard scrollbar-color
and scrollbar-width
properties, and otherwise use a fallback with ::-webkit-scrollbar-*
pseudo-elements.
The following example shows how to apply colors to scrollbars using scrollbar-color
if supported and ::-webkit-scrollbar-*
pseudo-elements if not.
HTML
<div class="scroll-box">
<h1>Yoshi</h1>
<p>
Yoshi is a fictional dinosaur who appears in video games published by
Nintendo. Yoshi debuted in Super Mario World (1990) on the SNES as Mario and
Luigi's sidekick.
</p>
<p>
Throughout the mainline Super Mario series, Yoshi typically serves as
Mario's trusted steed.
</p>
<p>
With a gluttonous appetite, Yoshi can gobble enemies with his long tongue,
and lay eggs that doubly function as projectiles.
</p>
</div>
CSS
/* For browsers that support `scrollbar-*` properties */
@supports (scrollbar-color: auto) {
.scroll-box {
scrollbar-color: aquamarine cornflowerblue;
}
}
/* Otherwise, use `::-webkit-scrollbar-*` pseudo-elements */
@supports selector(::-webkit-scrollbar) {
.scroll-box::-webkit-scrollbar {
background: aquamarine;
}
.scroll-box::-webkit-scrollbar-thumb {
background: cornflowerblue;
}
}
Result
In the example below, you can scroll the bordered box vertically to see the effect of styling the scrollbar.
Specifications
Not part of any standard.
Browser compatibility
css.selectors.-webkit-scrollbar
BCD tables only load in the browser
css.selectors.-webkit-scrollbar-button
BCD tables only load in the browser
css.selectors.-webkit-scrollbar-thumb
BCD tables only load in the browser
css.selectors.-webkit-scrollbar-track
BCD tables only load in the browser
css.selectors.-webkit-scrollbar-track-piece
BCD tables only load in the browser
css.selectors.-webkit-scrollbar-corner
BCD tables only load in the browser
css.selectors.-webkit-resizer
BCD tables only load in the browser
See also
scrollbar-width
scrollbar-color
- Don't use custom scrollbars (2023)
- Scrollbar styling on developer.chrome.com (2024)
- Styling Scrollbars on WebKit.org (2009)