CSS | scrollbar-color Property

The scrollbar-color property is used to set the color of an element’s scrollbar. It can be used to control both the scrollbar track and scrollbar thumb colors separately.
The track of a scrollbar is the background of the scrollbar which stays fixed and shows the area that can be scrolled. The thumb of the scrollbar refers to the moving part of the scrollbar that floats on top of the track and denotes the current position of the scroll.

Syntax:

scrollbar-color: auto | color | dark | light | initial | inherit

Property Values:



  • auto: It is used to set the scrollbar color to be automatically set by the browser. It is the default value and provides the browser default colors for rendering the scrollbar.

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
    <head>
      <title>
        CSS | scrollbar-color
      </title>
      <style>
        .scrollbar-auto {
          scrollbar-color: auto;
      
          height: 150px;
          width: 200px;
          overflow-y: scroll;
          background-color: lightgreen;
        }
      </style>
    </head>
    <body>
      <h1 style="color: green">
        GeeksforGeeks
      </h1>
      <b>
        CSS | scrollbar-color
      </b>
      <p>
        The container below has
        scrollbar-color set to 
        'auto'.
      </p>
      <div class="scrollbar-auto">
        GeeksforGeeks is a computer science
        portal with a huge variety of well
        written and explained computer science
        and programming articles, quizzes and
        interview questions. The portal also
        has dedicated GATE preparation and
        competitive programming sections.
      </div>
    </body>
    </html>

    chevron_right

    
    

    Output:
    auto

  • color: It is used to set the scrollbar color to any custom color. It takes two values, the first is applied to the scrollbar thumb and the second color is applied to the scrollbar track.

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
    <head>
      <title>
        CSS | scrollbar-color
      </title>
      <style>
        .scrollbar-colored {
          scrollbar-color: red green;
            
          height: 150px;
          width: 200px;
          overflow-y: scroll;
          background-color: lightgreen; 
        }
      </style>
    </head>
    <body>
      <h1 style="color: green">
        GeeksforGeeks
      </h1>
      <b>
        CSS | scrollbar-color
      </b>
      <p>
        The container below has a
        red green scrollbar-color.
      </p>
      <div class="scrollbar-colored">
        GeeksforGeeks is a computer science
        portal with a huge variety of well
        written and explained computer science
        and programming articles, quizzes and
        interview questions. The portal also
        has dedicated GATE preparation and
        competitive programming sections.
      </div>
    </body>
    </html>

    chevron_right

    
    

    Output:
    color

  • light: It is used to provide a lighter variant of the scrollbar which can be based on the default colors or a custom one. This property has been discontinued on all major browsers.
  •   
    dark: It is used to provide a darker variant of the scrollbar which can be based on the default colors or a custom one. This property has been discontinued on all major browsers.
  •   

  • initial: It is used to set the color to its default value.

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
    <head>
      <title>
        CSS | scrollbar-color
      </title>
      <style>
        .scrollbar-initial {
          scrollbar-color: initial;
      
          height: 150px;
          width: 200px;
          overflow-y: scroll;
          background-color: lightgreen;
        }
      </style>
    </head>
    <body>
      <h1 style="color: green">
        GeeksforGeeks
      </h1>
      <b>
        CSS | scrollbar-color
      </b>
      <p>
       The container below has
       scrollbar-color set to
       'initial'.
      </p>
      <div class="scrollbar-initial">
        GeeksforGeeks is a computer science
        portal with a huge variety of well
        written and explained computer science
        and programming articles, quizzes and
        interview questions. The portal also
        has dedicated GATE preparation and
        competitive programming sections.
      </div>
    </body>
    </html>

    chevron_right

    
    

    Output:
    initial

  • inherit: It is used to inherit the color from its parent.

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
    <head>
      <title>
        CSS | scrollbar-color
      </title>
      <style>
        .scrollbar-colored {
          scrollbar-color: green blue;
      
          height: 150px;
          width: 200px;
          overflow-y: scroll;
          background-color: lightgreen;
        }
      
        .scrollbar-inherit {
          scrollbar-color: inherit;
      
          height: 75px;
          width: 100px;
          overflow-y: scroll;
        }
      </style>
    </head>
    <body>
      <h1 style="color: green">
        GeeksforGeeks
      </h1>
      <b>
        CSS | scrollbar-color
      </b>
      <p>
        The container below has
        a scrollable child element
        that inherits the parent's
        scrollbar color.
      </p>
      <div class="scrollbar-colored">
        <div class="scrollbar-inherit">
          This scrollbar color is inherited
          from the parent.
        </div>
        GeeksforGeeks is a computer science
        portal with a huge variety of well
        written and explained computer science
        and programming articles, quizzes and
        interview questions. The portal also
        has dedicated GATE preparation and
        competitive programming sections.
      </div>
    </body>
    </html>

    chevron_right

    
    

    Output:
    inherit

Supported Browsers: The browsers supported by scrollbar-color property are listed below:

  • Firefox 64



My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.


Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.