::-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 concerns

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

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>
    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">
  <h3>Invisible scrollbar</h3>
    Thisisaveeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeerylongword
</div>
<div class="mostly-customized-scrollbar">
  <h3>Custom scrollbar</h3>
    Thisisaveeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeerylongword<br />
    And pretty tall<br />
    thing with weird scrollbars.<br />
    Who thought scrollbars could be made weird?
</div>
Result
&lt;/div&gt;&lt;/div&gt;&lt;/section&gt;&lt;section aria-labelledby="adding_a_fallback_for_scrollbar_styles"&gt;&lt;h3 id="adding_a_fallback_for_scrollbar_styles"&gt;&lt;a href="#adding_a_fallback_for_scrollbar_styles"&gt;Adding a fallback for scrollbar styles&lt;/a&gt;&lt;/h3&gt;&lt;div class="section-content"&gt;&lt;p&gt;
  You can use a &lt;a href="/en-US/docs/Web/CSS/@supports"&gt;&lt;code&gt;@supports&lt;/code&gt;&lt;/a&gt; at-rule to detect if a browser supports the standard &lt;a href="/en-US/docs/Web/CSS/scrollbar-color"&gt;&lt;code&gt;scrollbar-color&lt;/code&gt;&lt;/a&gt; and &lt;a href="/en-US/docs/Web/CSS/scrollbar-width"&gt;&lt;code&gt;scrollbar-width&lt;/code&gt;&lt;/a&gt; properties, and otherwise use a fallback with &lt;code&gt;::-webkit-scrollbar-*&lt;/code&gt; pseudo-elements.
  The following example shows how to apply colors to scrollbars using &lt;a href="/en-US/docs/Web/CSS/scrollbar-color"&gt;&lt;code&gt;scrollbar-color&lt;/code&gt;&lt;/a&gt; if supported and &lt;code&gt;::-webkit-scrollbar-*&lt;/code&gt; pseudo-elements if not.
&lt;div class="code-example"&gt;&lt;div class="example-header"&gt;&lt;span class="language-name"&gt;html&lt;/span&gt;&lt;/div&gt;&lt;pre class="brush: html notranslate" data-signature="kBqWPRVYlaXnYu1uy9yxYoqEYtCebsKmlQdFyraVOjI="&gt;&lt;code&gt;&lt;span class="token tag"&gt;&lt;span class="token tag"&gt;&lt;span class="token punctuation"&gt;&amp;lt;&lt;/span&gt;div&lt;/span&gt; &lt;span class="token attr-name"&gt;class&lt;/span&gt;&lt;span class="token attr-value"&gt;&lt;span class="token punctuation attr-equals"&gt;=&lt;/span&gt;&lt;span class="token punctuation"&gt;"&lt;/span&gt;scrollbox&lt;span class="token punctuation"&gt;"&lt;/span&gt;&lt;/span&gt;&lt;span class="token punctuation"&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;
  &lt;span class="token tag"&gt;&lt;span class="token tag"&gt;&lt;span class="token punctuation"&gt;&amp;lt;&lt;/span&gt;h1&lt;/span&gt;&lt;span class="token punctuation"&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;Yoshi&lt;span class="token tag"&gt;&lt;span class="token tag"&gt;&lt;span class="token punctuation"&gt;&amp;lt;/&lt;/span&gt;h1&lt;/span&gt;&lt;span class="token punctuation"&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;
    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.
    Throughout the mainline Super Mario series, Yoshi typically serves as
    Mario's trusted steed.
    With a gluttonous appetite, Yoshi can gobble enemies with his long tongue,
    and lay eggs that doubly function as projectiles.
&lt;span class="token tag"&gt;&lt;span class="token tag"&gt;&lt;span class="token punctuation"&gt;&amp;lt;/&lt;/span&gt;div&lt;/span&gt;&lt;span class="token punctuation"&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;
&lt;div class="code-example"&gt;&lt;pre class="brush: css hidden notranslate" data-signature="kme3+1raCN6xsdNbdwwigbVCAwJaTdYikPteKLMX5Xw="&gt;&lt;code&gt;&lt;span class="token selector"&gt;.scrollbox&lt;/span&gt; &lt;span class="token punctuation"&gt;{&lt;/span&gt;
  &lt;span class="token property"&gt;overflow&lt;/span&gt;&lt;span class="token punctuation"&gt;:&lt;/span&gt; auto&lt;span class="token punctuation"&gt;;&lt;/span&gt;
  &lt;span class="token property"&gt;width&lt;/span&gt;&lt;span class="token punctuation"&gt;:&lt;/span&gt; 20rem&lt;span class="token punctuation"&gt;;&lt;/span&gt;
  &lt;span class="token property"&gt;height&lt;/span&gt;&lt;span class="token punctuation"&gt;:&lt;/span&gt; 5rem&lt;span class="token punctuation"&gt;;&lt;/span&gt;
  &lt;span class="token property"&gt;border&lt;/span&gt;&lt;span class="token punctuation"&gt;:&lt;/span&gt; 2px solid cornflowerblue&lt;span class="token punctuation"&gt;;&lt;/span&gt;
  &lt;span class="token property"&gt;margin&lt;/span&gt;&lt;span class="token punctuation"&gt;:&lt;/span&gt; 2rem auto&lt;span class="token punctuation"&gt;;&lt;/span&gt;
  &lt;span class="token property"&gt;font-family&lt;/span&gt;&lt;span class="token punctuation"&gt;:&lt;/span&gt; monospace&lt;span class="token punctuation"&gt;;&lt;/span&gt;
&lt;div class="code-example"&gt;&lt;div class="example-header"&gt;&lt;span class="language-name"&gt;css&lt;/span&gt;&lt;/div&gt;&lt;pre class="brush: css notranslate" data-signature="iM3SL/n3g5tZQKp3UsJjUhWS9gGRnqwbAPznqmNeyk4="&gt;&lt;code&gt;&lt;span class="token comment"&gt;/* For browsers that support `scrollbar-*` properties */&lt;/span&gt;
&lt;span class="token atrule"&gt;&lt;span class="token rule"&gt;@supports&lt;/span&gt; &lt;span class="token punctuation"&gt;(&lt;/span&gt;&lt;span class="token property"&gt;scrollbar-color&lt;/span&gt;&lt;span class="token punctuation"&gt;:&lt;/span&gt; auto&lt;span class="token punctuation"&gt;)&lt;/span&gt;&lt;/span&gt; &lt;span class="token punctuation"&gt;{&lt;/span&gt;
  &lt;span class="token selector"&gt;.scrollbox&lt;/span&gt; &lt;span class="token punctuation"&gt;{&lt;/span&gt;
    &lt;span class="token property"&gt;scrollbar-color&lt;/span&gt;&lt;span class="token punctuation"&gt;:&lt;/span&gt; aquamarine cornflowerblue&lt;span class="token punctuation"&gt;;&lt;/span&gt;
&lt;span class="token comment"&gt;/* Otherwise, use `::-webkit-scrollbar-*` pseudo-elements */&lt;/span&gt;
&lt;span class="token atrule"&gt;&lt;span class="token rule"&gt;@supports&lt;/span&gt; &lt;span class="token function"&gt;selector&lt;/span&gt;&lt;span class="token punctuation"&gt;(&lt;/span&gt;&lt;span class="token selector-function-argument selector"&gt;::-webkit-scrollbar&lt;/span&gt;&lt;span class="token punctuation"&gt;)&lt;/span&gt;&lt;/span&gt; &lt;span class="token punctuation"&gt;{&lt;/span&gt;
  &lt;span class="token selector"&gt;.scrollbox::-webkit-scrollbar&lt;/span&gt; &lt;span class="token punctuation"&gt;{&lt;/span&gt;
    &lt;span class="token property"&gt;background&lt;/span&gt;&lt;span class="token punctuation"&gt;:&lt;/span&gt; aquamarine&lt;span class="token punctuation"&gt;;&lt;/span&gt;
  &lt;span class="token selector"&gt;.scrollbox::-webkit-scrollbar-thumb&lt;/span&gt; &lt;span class="token punctuation"&gt;{&lt;/span&gt;
    &lt;span class="token property"&gt;background&lt;/span&gt;&lt;span class="token punctuation"&gt;:&lt;/span&gt; cornflowerblue&lt;span class="token punctuation"&gt;;&lt;/span&gt;
&lt;h4 id="result_2"&gt;Result&lt;/h4&gt;
&lt;p&gt;In the example below, you can scroll the bordered box vertically to see the effect of styling the scrollbar.&lt;/p&gt;&lt;div class="code-example" id="sect5"&gt;&lt;div class="example-header" id="sect6"/&gt;&lt;iframe class="sample-code-frame" title="Adding a fallback for scrollbar styles" id="frame_adding_a_fallback_to_standard_scrollbar_style_properties" src="https://live.mdnplay.dev/en-US/docs/Web/CSS/::-webkit-scrollbar/runner.html?id=adding_a_fallback_to_standard_scrollbar_style_properties" loading="lazy"/&gt;&lt;/div&gt;&lt;/div&gt;&lt;/section&gt;&lt;section aria-labelledby="specifications"&gt;&lt;h2 id="specifications"&gt;&lt;a href="#specifications"&gt;Specifications&lt;/a&gt;&lt;/h2&gt;&lt;div class="section-content"&gt;&lt;p&gt;Not part of any standard.&lt;/p&gt;&lt;/div&gt;&lt;/section&gt;&lt;section aria-labelledby="browser_compatibility"&gt;&lt;h2 id="browser_compatibility"&gt;&lt;a href="#browser_compatibility"&gt;Browser compatibility&lt;/a&gt;&lt;/h2&gt;&lt;div class="section-content"/&gt;&lt;/section&gt;&lt;h3 id="css.selectors.-webkit-scrollbar"&gt;&lt;a href="#css.selectors.-webkit-scrollbar"&gt;css.selectors.-webkit-scrollbar&lt;/a&gt;&lt;/h3&gt;&lt;p&gt;BCD tables only load in the browser&lt;/p&gt;&lt;noscript&gt; &lt;!-- --&gt;with JavaScript enabled. Enable JavaScript to view data.&lt;/noscript&gt;&lt;h3 id="css.selectors.-webkit-scrollbar-button"&gt;&lt;a href="#css.selectors.-webkit-scrollbar-button"&gt;css.selectors.-webkit-scrollbar-button&lt;/a&gt;&lt;/h3&gt;&lt;p&gt;BCD tables only load in the browser&lt;/p&gt;&lt;noscript&gt; &lt;!-- --&gt;with JavaScript enabled. Enable JavaScript to view data.&lt;/noscript&gt;&lt;h3 id="css.selectors.-webkit-scrollbar-thumb"&gt;&lt;a href="#css.selectors.-webkit-scrollbar-thumb"&gt;css.selectors.-webkit-scrollbar-thumb&lt;/a&gt;&lt;/h3&gt;&lt;p&gt;BCD tables only load in the browser&lt;/p&gt;&lt;noscript&gt; &lt;!-- --&gt;with JavaScript enabled. Enable JavaScript to view data.&lt;/noscript&gt;&lt;h3 id="css.selectors.-webkit-scrollbar-track"&gt;&lt;a href="#css.selectors.-webkit-scrollbar-track"&gt;css.selectors.-webkit-scrollbar-track&lt;/a&gt;&lt;/h3&gt;&lt;p&gt;BCD tables only load in the browser&lt;/p&gt;&lt;noscript&gt; &lt;!-- --&gt;with JavaScript enabled. Enable JavaScript to view data.&lt;/noscript&gt;&lt;h3 id="css.selectors.-webkit-scrollbar-track-piece"&gt;&lt;a href="#css.selectors.-webkit-scrollbar-track-piece"&gt;css.selectors.-webkit-scrollbar-track-piece&lt;/a&gt;&lt;/h3&gt;&lt;p&gt;BCD tables only load in the browser&lt;/p&gt;&lt;noscript&gt; &lt;!-- --&gt;with JavaScript enabled. Enable JavaScript to view data.&lt;/noscript&gt;&lt;h3 id="css.selectors.-webkit-scrollbar-corner"&gt;&lt;a href="#css.selectors.-webkit-scrollbar-corner"&gt;css.selectors.-webkit-scrollbar-corner&lt;/a&gt;&lt;/h3&gt;&lt;p&gt;BCD tables only load in the browser&lt;/p&gt;&lt;noscript&gt; &lt;!-- --&gt;with JavaScript enabled. Enable JavaScript to view data.&lt;/noscript&gt;&lt;h3 id="css.selectors.-webkit-resizer"&gt;&lt;a href="#css.selectors.-webkit-resizer"&gt;css.selectors.-webkit-resizer&lt;/a&gt;&lt;/h3&gt;&lt;p&gt;BCD tables only load in the browser&lt;/p&gt;&lt;noscript&gt; &lt;!-- --&gt;with JavaScript enabled. Enable JavaScript to view data.&lt;/noscript&gt;&lt;section aria-labelledby="see_also"&gt;&lt;h2 id="see_also"&gt;&lt;a href="#see_also"&gt;See also&lt;/a&gt;&lt;/h2&gt;&lt;div class="section-content"&gt;&lt;ul&gt;

CSS Scrollbar Selectors

Accessibility concerns

Examples

Styling scrollbars using -webkit-scrollbar

CSS

Result

Styling scrollbars using `-webkit-scrollbar`