Tutorial

How To Style Scrollbars with CSS

Updated on November 30, 2021
    Default avatar

    By William Le

    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
    William Le

    author



    Still looking for an answer?

    Ask a questionSearch for more help

    Was this helpful?
     
    3 Comments
    

    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!

    Web hosting without headaches

    Try Cloudways, the #1 managed hosting provider for agencies & developers, with $100 in free credit Learn more

    Join the Tech Talk
    Success! Thank you! Please check your email for further details.

    Please complete your information!

    Get our biweekly newsletter

    Sign up for Infrastructure as a Newsletter.

    Hollie's Hub for Good

    Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.

    Become a contributor

    Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.

    Welcome to the developer cloud

    DigitalOcean makes it simple to launch in the cloud and scale up as you grow — whether you're running one virtual machine or ten thousand.

    Learn more
    DigitalOcean Cloud Control Panel