CSS | scrollbar-width Property - GeeksforGeeks

30 Jun, 2021
The scrollbar-width property is used to set the width or thickness of an element’s scrollbar when shown. This property can be used on pages where the user interface requires the element to be displayed more prominently and shrinking the scrollbar width gives more space to the element.This a currently an experimental property and some of the major browsers may not be supported.Syntax: 
scrollbar-width: auto | thin | none | initial | inherit
Property Values:  
auto: It is used to set the scrollbar width to be automatically set by the browser. It is the default value.Example:  
html
<!DOCTYPE html><html>     <head>    <title>CSS | scrollbar-width property</title>         <style>        .scrollbar-auto {            scrollbar-width: auto;            background-color: lightgreen;            height: 150px;            width: 200px;            overflow-y: scroll;        }    </style></head> <body>    <h1 style="color: green">        GeeksforGeeks    </h1>         <b>CSS | scrollbar-width</b>          <p>scrollbar-width: 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>
Output:  
thin: It is used to set the scrollbar width to a thinner variant of the default scrollbar.Example:  
html
<!DOCTYPE html><html>     <head>    <title>CSS | scrollbar-width</title>         <style>        .scrollbar-thin {            scrollbar-width: thin;            background-color: lightgreen;            height: 150px;            width: 200px;            overflow-y: scroll;        }    </style></head> <body>    <h1 style="color: green">        GeeksforGeeks    </h1>         <b>CSS | scrollbar-width</b>          <p>scrollbar-width: thin</p>          <div class="scrollbar-thin">        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>
Output:  
none: It is used to completely hide the scrollbar, however the content is still scrollable.Example:  
html
<!DOCTYPE html><html>     <head>    <title>CSS | scrollbar-width</title>         <style>        .scrollbar-none {            scrollbar-width: none;            background-color: lightgreen;            height: 150px;            width: 200px;            overflow-y: scroll;        }    </style></head> <body>    <h1 style="color: green">        GeeksforGeeks    </h1>         <b>CSS | scrollbar-width</b>          <p>scrollbar-width: none</p>          <div class="scrollbar-none">        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>
Output:  
initial: It is used to set the scrollbar width to its default value.Example:  
html
<!DOCTYPE html><html>     <head>    <title>CSS | scrollbar-width</title>         <style>        .scrollbar-initial {            scrollbar-width: initial;            background-color: lightgreen;            height: 150px;            width: 200px;            overflow-y: scroll;        }    </style></head> <body>    <h1 style="color: green">        GeeksforGeeks    </h1>         <b>CSS | scrollbar-width</b>          <p>scrollbar-width: 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>
Output:  
inherit: It is used to inherit the scrollbar width from its parent.Example:  
html
<!DOCTYPE html><html>     <head>    <title>CSS | scrollbar-width</title>    <style>        .scrollbar-thin {            scrollbar-width: thin;            background-color: lightgreen;            height: 150px;            width: 200px;            overflow-y: scroll;            margin: 10px;        }             .scrollbar-inherit {            scrollbar-width: inherit;            background-color: green;            height: 50px;            width: 150px;            overflow-y: scroll;        }    </style></head> <body>    <h1 style="color: green">        GeeksforGeeks    </h1>         <b>CSS | scrollbar-width</b>          <p>scrollbar-width: inherit</p>          <div class="scrollbar-thin">        <div class="scrollbar-inherit">            This text is inside a parent element.            This div has an inherited scrollbar.        </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>
Output:  
Supported Browsers: The browser supported by scrollbar-width property are listed below: 
Google Chrome
Internet Explorer
Firefox
Opera
Safari 
ysachin2314
CSS-Properties
CSS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to set space between the flexbox ?
Design a web page using HTML and CSS
Form validation using jQuery
Search Bar using HTML, CSS and JavaScript
How to style a checkbox using CSS?
Remove elements from a JavaScript Array
Installation of Node.js on Linux
Convert a string to an integer in JavaScript
How to fetch data from an API in ReactJS ?
Difference between var, let and const keywords in JavaScript