::-webkit-scrollbar

Draft
This page is not complete.

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 the scrollbar of an element.

::-webkit-scrollbar is only available in Blink- and WebKit-based browsers (e.g., Chrome, Edge, Opera, Safari, all browsers on iOS, and others).

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).
  • ::-webkit-scrollbar-thumb — the draggable scrolling handle.
  • ::-webkit-scrollbar-track — the track (progress bar) of the scrollbar.
  • ::-webkit-scrollbar-track-piece — the part of the track (progress bar) not covered by the handle.
  • ::-webkit-scrollbar-corner — the bottom corner of the scrollbar, where both horizontal and vertical scrollbars meet.
  • ::-webkit-resizer — the draggable resizing handle that appears at the bottom corner of some elements.

Syntax

Syntax not found in DB!

Examples

.visible-scrollbar, .invisible-scrollbar, .mostly-customized-scrollbar {
  display: block;
  width: 10em;
  overflow: auto;
  height: 2em;
}

.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;
}
<div class="visible-scrollbar">
  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.
</div>

<div class="invisible-scrollbar">
Thisisaveeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeerylongword
</div>

<div class="mostly-customized-scrollbar">
Thisisaveeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeerylongword<br>
And pretty tall<br>
thing with weird scrollbars.<br>
Who thought scrollbars could be made weeeeird?
</div>

Specifications

Not part of any standard.

Browser compatibility

::-webkit-scrollbar

DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
::-webkit-scrollbar
Non-standard
Chrome Full support 2Edge Full support 79Firefox No support No
Notes
No support No
Notes
Notes See bug 1432935.
IE No support NoOpera Full support 15Safari Full support 4WebView Android Full support ≤37Chrome Android Full support 18Firefox Android No support No
Notes
No support No
Notes
Notes See bug 1432935.
Opera Android Full support 14Safari iOS Full support 3Samsung Internet Android Full support 1.0

Legend

Full support
Full support
No support
No support
Non-standard. Expect poor cross-browser support.
Non-standard. Expect poor cross-browser support.
See implementation notes.
See implementation notes.

::-webkit-scrollbar-button

DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
::-webkit-scrollbar-button
Non-standard
Chrome Full support 2Edge Full support 79Firefox No support No
Notes
No support No
Notes
Notes See bug 1432935.
IE No support NoOpera Full support 15Safari Full support 4WebView Android Full support ≤37Chrome Android Full support 18Firefox Android No support No
Notes
No support No
Notes
Notes See bug 1432935.
Opera Android Full support 14Safari iOS Full support 3Samsung Internet Android Full support 1.0

Legend

Full support
Full support
No support
No support
Non-standard. Expect poor cross-browser support.
Non-standard. Expect poor cross-browser support.
See implementation notes.
See implementation notes.

::-webkit-scrollbar-thumb

DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
::-webkit-scrollbar-thumb
Non-standard
Chrome Full support 2Edge Full support 79Firefox No support No
Notes
No support No
Notes
Notes See bug 1432935.
IE No support NoOpera Full support 15Safari Full support 4WebView Android Full support ≤37Chrome Android Full support 18Firefox Android No support No
Notes
No support No
Notes
Notes See bug 1432935.
Opera Android Full support 14Safari iOS Full support 3Samsung Internet Android Full support 1.0

Legend

Full support
Full support
No support
No support
Non-standard. Expect poor cross-browser support.
Non-standard. Expect poor cross-browser support.
See implementation notes.
See implementation notes.

::-webkit-scrollbar-track

DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
::-webkit-scrollbar-track
Non-standard
Chrome Full support 2Edge Full support 79Firefox No support No
Notes
No support No
Notes
Notes See bug 1432935.
IE No support NoOpera Full support 15Safari Full support 4WebView Android Full support ≤37Chrome Android Full support 18Firefox Android No support No
Notes
No support No
Notes
Notes See bug 1432935.
Opera Android Full support 14Safari iOS Full support 3Samsung Internet Android Full support 1.0

Legend

Full support
Full support
No support
No support
Non-standard. Expect poor cross-browser support.
Non-standard. Expect poor cross-browser support.
See implementation notes.
See implementation notes.

::-webkit-scrollbar-track-piece

DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
::-webkit-scrollbar-track-piece
Non-standard
Chrome Full support 2Edge Full support 79Firefox No support No
Notes
No support No
Notes
Notes See bug 1432935.
IE No support NoOpera Full support 15Safari Full support 4WebView Android Full support ≤37Chrome Android Full support 18Firefox Android No support No
Notes
No support No
Notes
Notes See bug 1432935.
Opera Android Full support 14Safari iOS Full support 3Samsung Internet Android Full support 1.0

Legend

Full support
Full support
No support
No support
Non-standard. Expect poor cross-browser support.
Non-standard. Expect poor cross-browser support.
See implementation notes.
See implementation notes.

::-webkit-scrollbar-corner

DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
::-webkit-scrollbar-corner
Non-standard
Chrome Full support 2Edge Full support 79Firefox No support No
Notes
No support No
Notes
Notes See bug 1432935.
IE No support NoOpera Full support 15Safari Full support 4WebView Android Full support ≤37Chrome Android Full support 18Firefox Android No support No
Notes
No support No
Notes
Notes See bug 1432935.
Opera Android Full support 14Safari iOS Full support 3Samsung Internet Android Full support 1.0

Legend

Full support
Full support
No support
No support
Non-standard. Expect poor cross-browser support.
Non-standard. Expect poor cross-browser support.
See implementation notes.
See implementation notes.

::-webkit-resizer

DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
::-webkit-resizer
Non-standard
Chrome Full support 2Edge Full support 79Firefox No support No
Notes
No support No
Notes
Notes See bug 1432935.
IE No support NoOpera Full support 15Safari Full support 4WebView Android Full support ≤37Chrome Android Full support 18Firefox Android No support No
Notes
No support No
Notes
Notes See bug 1432935.
Opera Android Full support 14Safari iOS Full support 3.2Samsung Internet Android Full support 1.0

Legend

Full support
Full support
No support
No support
Non-standard. Expect poor cross-browser support.
Non-standard. Expect poor cross-browser support.
See implementation notes.
See implementation notes.

See also