CSS - scrollbar-width Property

CSS scrollbar-width property is used to style the width of scrollbar thumbs and tracks.

Possible Values

  • auto − Default value. The browser will use the default scrollbar width.

  • none − This property hides the scrollbar completely, when the content is still scrollable.

  • thin − The browser will display a scrollbar that is thinner than the default scrollbar.

Applies to

Scrolling boxes.

DOM Syntax

object.style.scrollbarWidth= "auto|none|thin";
The scrollbar-width property is only supported by Firefox Browser.

CSS Scrollbar Width - Auto Value

The following example demonstrates how to use the scrollbar-width: auto property, which allows the browser set the width of the scrollbar automatically −

<html>
<head>
<style>
   .scroll-container {
      width: 300px;
      height: 150px;
      overflow: auto;
      scrollbar-width: 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-width: auto</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 Width - None Value

The following example demonstrates how to hide the scrollbar using the scrollbar-width: none property −

<html>
<head>
<style>
   .scroll-container {
      width: 300px;
      height: 150px;
      overflow: auto;
      scrollbar-width: none;
      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-width: none</h2>
         <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 Width - Thin Value

The following example demonstrates how to make the scrollbar thinner using the scrollbar-width: thin property −

<html>
<head>
<style>
   .scroll-container {
      width: 300px;
      height: 150px;
      overflow: auto;
      scrollbar-width: thin;
      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-width: thin</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