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
To Continue Learning Please Login
Login with Google