Grow your CSS skills. Land your dream job.

scrollbar

Last updated on:

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:

  1. ::-webkit-scrollbar addresses the background of the bar itself. It is usually covered by the other elements
  2. ::-webkit-scrollbar-button addresses the directional buttons on the scrollbar
  3. ::-webkit-scrollbar-track addresses the empty space “below” the progress bar
  4. ::-webkit-scrollbar-track-piece is the top-most layer of the the progress bar not covered by the draggable scrolling element (thumb)
  5. ::-webkit-scrollbar-thumb addresses the draggable scrolling element that resizes depending on the size of the scrollable element
  6. ::-webkit-scrollbar-corner addresses the (usually) bottom corner of the scrollable element, where two scrollbars might meet
  7. ::-webkit-resizer addresses the draggable resizing handle that appears above the scrollbar-corner at the bottom corner of some elements

In addition to these pseudo-elements, there are also eleven pseudo-selector classes that aren't required, but provide designers with the power to style various states and interactions of the scrollbar UI. A full breakdown of those pseudo-selectors, and a detailed example, can be found in this CSS-Tricks article.

Check out this Pen!

Points of Interest

  • If there is no qualifying selector preceding the various pseudo-elements, the styles will apply to any scrollbar that may appear on the page.
  • Setting -webkit-scrollbar styles is a good way to force your webpage to show horizontal or vertical scrollbars on versions of Mac OS newer than Lion, on which scrollbars are usually hidden by default.
  • Since this property is behind a -webkit vendor prefix, several jQuery plugins have been written to “polyfill” or extend this functionality to other browsers. One such plugin is jScrollPane.

Other Resources

Browser Support

Chrome Safari Firefox Opera IE Android iOS
yep yep nope 15+ nope yep yep

Comments

  1. No more information on this and other properties? I mean you can provide some examples or illustration on these properties.

  2. MartinMuzatko
    Permalink to comment#

    This property is rather antique. It used to work in IE 5.5

    http://css-tricks.com/custom-scrollbars-in-webkit/

    Way back in the day, you could customize scrollbars in IE (5.5) with non-standard CSS properties like scrollbar-base-color which you would use on the element that scrolls (like the ) and do totally rad things. IE dropped that.

  3. susi
    Permalink to comment#

    Nice example………. and this page has very very useful and wonderful features . especially this comment area is awesome!

  4. No browser support for Firefox and is an open issue since 2001

    0.0

    Mkay

  5. sakti prasad debnath
    Permalink to comment#

    how will i be able to customize the browser’s right scrollbar using css????

  6. sabir
    Permalink to comment#

    Hi Martin ,
    Firstly , thanks a lot for sharing this about using scrollbar , I created a scroll bar for my text content in my html app , and now the scroll bar looks and works fine , but the guy at my office who reviewed my UI said that the when the text content is scrolled , it appears as if the text is getting cut and displayed at the top or at the bottom . I actually tried to scroll the text in your example and feel the same .

    DO you have any suggestion on how i can get rid of the text being shown as half cut when i scroll ??

    thanks
    Sabir

  7. Nader Nael Besada
    Permalink to comment#

    This websiteos is asomitos

  8. Baby
    Permalink to comment#

    Thank you you so much its very helpful to me :)

  9. muthu pandianc
    Permalink to comment#

    thank you nice information for front end developers

  10. Sachin
    Permalink to comment#

    ThanQ boss, this example helped me in designing my website.

Leave a Comment

Posting Code

Markdown is supported in the comment area, so you can write inline code in backticks like `this` or multiline blocks of code in in triple backtick fences like ```this```. You don't need to escape code in backticks, Markdown does that for you.

Sadly, it's kind of broken. WordPress only accepts a subset of HTML in comments, which makes sense, because certainly some HTML can't be allowed, like <script> tags. But this stripping happens before the comment is processed by Markdown (via Jetpack). It seems to me that would be reversed, because after Markdown processes code in backticks, it's escaped, thus safe. If you think you can fix this issue, get in touch!

If you need to make sure the code (typically HTML) you post absolutely posts correctly, escape it and put it within <pre><code> tags.

Current ye@r *

*May or may not contain any actual "CSS" or "Tricks".