// Tutorial //

How To Style Scrollbars with CSS

Published on September 2, 2020 · Updated on November 30, 2021
    Default avatar
    By William Le
    Developer and author at DigitalOcean.
    English
    How To Style Scrollbars with CSS

    Introduction

    In September 2018, W3C CSS Scrollbars defined specifications for customizing the appearance of scrollbars with CSS.

    As of 2020, 96% of internet users are running browsers that support CSS scrollbar styling. However, you will need to write two sets of CSS rules to cover Blink and WebKit and also Firefox browsers.

    In this tutorial, you will learn how to use CSS to customize scrollbars to support modern browsers.

    Prerequisites

    To follow along with this article, you will need:

    Styling Scrollbars in Chrome, Edge, and Safari

    Currently, styling scrollbars for Chrome, Edge, and Safari is available with the vendor prefix pseudo-element -webkit-scrollbar.

    Here is an example that uses ::-webkit-scrollbar, ::-webkit-scrollbar-track, and ::webkit-scrollbar-thumb pseudo-elements:

    body::-webkit-scrollbar {
      width: 12px;               /* width of the entire scrollbar */
    }
    
    body::-webkit-scrollbar-track {
      background: orange;        /* color of the tracking area */
    }
    
    body::-webkit-scrollbar-thumb {
      background-color: blue;    /* color of the scroll thumb */
      border-radius: 20px;       /* roundness of the scroll thumb */
      border: 3px solid orange;  /* creates padding around scroll thumb */
    }
    

    Here is a screenshot of the scrollbar that is produced with these CSS rules:

    Screenshot of an example webpage with a customized scrollbar with a blue scrollbar on an orange track.

    This code works in the latest releases of Chrome, Edge, and Safari.

    Unfortunately, this spec has been formally abandoned by W3C and will likely be deprecated over time.

    Styling Scrollbars in Firefox

    Currently, styling scrollbars for Firefox is available with the new CSS Scrollbars.

    Here is an example that uses scrollbar-width and scrollbar-color properties:

    body {
      scrollbar-width: thin;          /* "auto" or "thin" */
      scrollbar-color: blue orange;   /* scroll thumb and track */ 
    }
    

    Here is a screenshot of the scrollbar that is produced with these CSS rules:

    Screenshot of an example webpage with a customized scrollbar with a blue scrollbar on an orange track.

    This specification shares some commonality with the -webkit-scrollbar specification for controlling the color of the scrollbar. However, there is presently no support for modifying the padding and roundness for the “track thumb”.

    Building Future-Proof Scrollbar Styles

    You can write your CSS in a way to support both -webkit-scrollbar and CSS Scrollbars specifications.

    Here is an example that uses scrollbar-width, scrollbar-color, ::-webkit-scrollbar, ::-webkit-scrollbar-track, ::webkit-scrollbar-thumb:

    /* Works on Firefox */
    * {
      scrollbar-width: thin;
      scrollbar-color: blue orange;
    }
    
    /* Works on Chrome, Edge, and Safari */
    *::-webkit-scrollbar {
      width: 12px;
    }
    
    *::-webkit-scrollbar-track {
      background: orange;
    }
    
    *::-webkit-scrollbar-thumb {
      background-color: blue;
      border-radius: 20px;
      border: 3px solid orange;
    }
    

    Blink and WebKit browsers will ignore rules they do not recognize and apply -webkit-scrollbar rules. Firefox browsers will ignore rules they do not recognize and apply CSS Scrollbars rules. Once Blink and WebKit browsers fully deprecate the -webkit-scrollbar specification, they will gracefully fall back to the new CSS Scrollbars specification.

    Conclusion

    In this article, you were introduced to using CSS to style scrollbars and how to ensure these styles are recognized in most modern browsers.

    It is also possible to simulate a scrollbar by hiding the default scrollbar and using JavaScript to detect height and scroll position. However, these approaches run into limitations with reproducing experiences like inertia scrolling (e.g., decaying motion when scrolling via trackpads).

    If you’d like to learn more about CSS, check out our CSS topic page for exercises and programming projects.

    Want to deploy your application quickly? Try Cloudways, the #1 managed hosting provider for small-to-medium businesses, agencies, and developers - for free. DigitalOcean and Cloudways together will give you a reliable, scalable, and hassle-free managed hosting experience with anytime support that makes all your hosting worries a thing of the past. Start with $100 in free credits!

    Learn more here


    About the authors
    Default avatar
    Developer and author at DigitalOcean.

    Default avatar
    Developer and author at DigitalOcean.

    Still looking for an answer?

    Ask a questionSearch for more help

    Was this helpful?
     
    3 Comments
    Leave a comment...

    This textbox defaults to using Markdown to format your answer.

    You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!

    Hi William,

    For a specific part of the screen like sidebars, I have turned it into a class, so I just have to put it in elements that overflow:

    /* Scrollbar styling */
    
    /* Works on Firefox */
    .scroll-black * {
    	scrollbar-width: thin;
    	scrollbar-color: rgb(70, 70, 70) auto;
    }
    
    /* Works on Chrome, Edge, and Safari */
    .scroll-black *::-webkit-scrollbar {
    	width: 7px;
    }
    
    .scroll-black *::-webkit-scrollbar-track {
    	background: transparent;
    }
    
    .scroll-black *::-webkit-scrollbar-thumb {
    	background-color:rgb(70, 70, 70);
    }
    
    /* End scrollbar styling*/
    

    I find CSS scrollbars are useless and ugly. This is a stupid ideal that Apple created for MAC OS X Lion. What wrong with the classic scrollbars.

    Thanks, helped me a lot!

    Try DigitalOcean for free

    Click here to sign up and get $200 of credit to try our products over 60 days!
    Try DigitalOcean for free