scrollbar

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. User Avatar
    Umar Farooque

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

  2. User Avatar
    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. User Avatar
    susi
    Permalink to comment#

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

  4. User Avatar
    Erik Cervin Edin
    Permalink to comment#

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

    0.0

    Mkay

  5. User Avatar
    sakti prasad debnath
    Permalink to comment#

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

  6. User Avatar
    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. User Avatar
    Nader Nael Besada
    Permalink to comment#

    This websiteos is asomitos

  8. User Avatar
    Baby
    Permalink to comment#

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

  9. User Avatar
    muthu pandianc
    Permalink to comment#

    thank you nice information for front end developers

  10. User Avatar
    Sachin
    Permalink to comment#

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

  11. User Avatar
    masum billah
    Permalink to comment#

    It’s nice. Better if run the firefox and IE.

  12. User Avatar
    Sheyad
    Permalink to comment#

    Not working in Firefox & IE

  13. User Avatar
    Kayson
    Permalink to comment#

    How can I apply original style to ::-webkit-scrollbar-button? Do I have to specify background image for it?

  14. User Avatar
    Arunthathi
    Permalink to comment#

    is there any way to increase the scroll bar width in IE 11?

  15. User Avatar
    asdas
    Permalink to comment#
    <script>
      function example() {
        element.innerHTML = "<div>code</div>";
      }
    </script>
    
    <script>
      function example() {
        element.innerHTML = "<div>code</div>";
      }
    </script>
    
    <script>
      function example() {
        element.innerHTML = "<div>code</div>";
      }
    </script>
    
    <script>
      function example() {
        element.innerHTML = "<div>code</div>";
      }
    </script>
    
    <script>
      function example() {
        element.innerHTML = "<div>code</div>";
      }
    </script>
    
    • User Avatar
      DXkite
      Permalink to comment#

      why can’t use :hover style for it? the facebook create hover style by using script…

  16. User Avatar
    Lauren
    Permalink to comment#

    Enjoyed reading this and tried it myself but the custom scrollbar did not render in Firefox, looks great in other browsers, any ideas?

  17. User Avatar
    mehmet
    Permalink to comment#

    thanks

  18. User Avatar
    Den
    Permalink to comment#

    Good example. approximately also implemented here on the website.

  19. User Avatar
    admin
    Permalink to comment#

    Not working in mozilla firefox

  20. User Avatar
    sachi
    Permalink to comment#

    not working on firebox browser……………

  21. User Avatar
    Kunal
    Permalink to comment#

    Android Chrome browser removed support since last December 2016. Doesn’t work now on android chrome but works on desktop chrome.

  22. User Avatar
    gauri
    Permalink to comment#

    hello m not able to change the height of scroll bar thumb .how can I change it???

Submit a Comment

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

icon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag