{"id":14101,"date":"2011-09-06T12:05:20","date_gmt":"2011-09-06T19:05:20","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=14101"},"modified":"2022-09-30T12:31:47","modified_gmt":"2022-09-30T19:31:47","slug":"scrollbar","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/properties\/s\/scrollbar\/","title":{"rendered":"scrollbar"},"content":{"rendered":"\n

A brief history of styling scrollbars:<\/p>\n\n\n\n

  1. It used to be a thing only Internet Explorer could do (ancient versions) with stuff like -ms-scrollbar-base-color<\/code>. These do not exist anymore.<\/li>
  2. Then WebKit-based browser engines got on board with stuff like ::-webkit-scrollbar<\/code>. That’s what this Alamanac entry mostly covers, as it works across the Safari\/Chrome landscape today.<\/li>
  3. Standards have finally gotten involved, and those styling options are covered by un-prefixed properties like scrollbar-color<\/code><\/a> and scrollbar-width<\/code><\/a>.<\/li><\/ol>\n\n\n\n
    \n\n\n\n

    Styling scrollbars for the Safari\/Chrome world is exposed behind the -webkit<\/code> vendor prefix.<\/p>\n\n\n\n

    This almanac entry is an overview, for a more complete breakdown of working with custom scrollbars, please read this CSS-Tricks article<\/a>.<\/p>\n\n\n\n

    body::-webkit-scrollbar {\n  width: 1em;\n}\n \nbody::-webkit-scrollbar-track {\n  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);\n}\n \nbody::-webkit-scrollbar-thumb {\n  background-color: darkgrey;\n  outline: 1px solid slategrey;\n}<\/code><\/pre>\n\n\n\n
    The -webkit-scrollbar<\/code> family of properties consists of seven<\/i> different pseudo-elements that, together, comprise a full scrollbar UI element:<\/p>\n\n\n\n
    1. ::-webkit-scrollbar<\/code> addresses the background of the bar itself. It is usually covered by the other elements<\/li>
    2. ::-webkit-scrollbar-button<\/code> addresses the directional buttons on the scrollbar<\/li>
    3. ::-webkit-scrollbar-track<\/code> addresses the empty space \u201cbelow\u201d the progress bar<\/li>
    4. ::-webkit-scrollbar-track-piece<\/code> is the top-most layer of the the progress bar not covered by the draggable scrolling element (thumb)<\/li>
    5. ::-webkit-scrollbar-thumb<\/code> addresses the draggable scrolling element that resizes depending on the size of the scrollable element<\/li>
    6. ::-webkit-scrollbar-corner<\/code> addresses the (usually) bottom corner of the scrollable element, where two scrollbars might meet<\/li>
    7. ::-webkit-resizer<\/code> addresses the draggable resizing handle that appears above the scrollbar-corner<\/code> at the bottom corner of some elements<\/li><\/ol>\n\n\n\n
      In addition to these pseudo-elements, there are also eleven<\/i> 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<\/a>.<\/p>\n\n\n\n