CSS - scrollbar-color Property

CSS scrollbar-color property allows you to style the color of the scrollbar thumb and track.

The scrollbar thumb is the movable part of the scrollbar that you can drag up and down to scroll through the content of a web page. The scrollbar track is the background of the scrollbar.

Possible Values

  • auto − Default value. The browser will use its default scrollbar colors.

  • <color> <color> − This property can take two values, one for the color of the scrollbar thumb and one for the color of the scrollbar track.

Applies to

Scrolling boxes.

DOM Syntax

object.style.scrollbarColor= "auto|color color";
The scrollbar-color property is only supported by Firefox Browser.

CSS Scrollbar Color - Auto Value

The following example demonstrates how to use the scrollbar-color: auto property to get the default scrollbar colors for browsers −

<html>
<head>
<style>
   .scroll-container {
      width: 300px;
      height: 150px;
      overflow: auto;
      scrollbar-color: auto; 
      border: 2px solid red;
   }
</style>
</head>
<body>
   <h3>This example is only supported by Firefox Browser.</h3>
   <div class="scroll-container">
      <div class="scrolling-section">
         <h2>scrollbar-color</h1>
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Contrary to popular belief, Lorem Ipsum is not simply random text.</p>
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam.</p>
      </div>
   </div>
</body>
</html>

CSS Scrollbar Color - Color Value

The following example demonstrates how to use the scrollbar-color CSS property to change the color of the scrollbar track and thumb −

<html>
<head>
<style>
   .scroll-container {
      width: 300px;
      height: 150px;
      overflow: auto;
      scrollbar-color: pink yellow; 
      border: 2px solid red;
   }
</style>
</head>
<body>
   <h3>This example is only supported by Firefox Browser.</h3>
   <div class="scroll-container">
      <div class="scrolling-section">
         <h2>scrollbar-color</h1>
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Contrary to popular belief, Lorem Ipsum is not simply random text.</p>
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam.</p>
      </div>
   </div>
</body>
</html>
Advertisements