Home > Article > Web Front-end > What properties does Firefox support using css to change the scroll bar?
Firefox supports two CSS properties for changing the scroll bar: 1. The scrollbar-color property is used to set the color of the element's scroll bar. It can control the color of the scroll bar track and the scroll bar thumb. The syntax "scrollbar -color:color|dark|light;"; 2. The scrollbar-width attribute is used to set the width or thickness of the scroll bar of the element when displayed. The syntax is "scrollbar-width:thin|none|width size value;".
The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.
The only CSS properties that can modify the Firefox scroll bar style are scrollbar-color and scrollbar-width.
scrollbar-color property
scrollbar-color property is used to set the color of the element's scroll bar. It can be used to control the color of the scrollbar track and scrollbar thumb respectively. The scroll bar's track is the scroll bar's background, which remains fixed and shows the area that can be scrolled. The scroll bar's thumb refers to the moving portion of the scroll bar, which is a floating point number at the top of the track that represents the current position of the scroll bar.
track (track) refers to the background of the scroll bar, which is generally fixed regardless of the scroll position.
The thumb refers to the moving part of the scroll bar that usually floats on top of the track.
Grammar:
scrollbar-color:auto | color | dark | light
##auto | at The track portion of the scroll bar is rendered by default platform without any other associated scroll bar color properties. |
dark | Displays a black scroll bar, either a dark variant of the scroll bar provided by the platform, or with a dark color Custom scroll bars. |
light | Displays a lightweight scrollbar, either a slight variation of the scrollbar provided by the platform, or with a light Colored custom scroll bars. |
|
<!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>
<!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>
scrollbar-width propertyscrollbar-width property allows developers to set the thickness of the scroll bar when it appears
scrollbar-width property is used to set the scrollbar of the element when it is displayed The width or thickness of the strip. This attribute can be used on pages where the user interface requires that the element should be displayed more prominently, and reducing the scroll bar width provides more space for the element.
Syntax:
scrollbar-width:auto | thin | none |len
Usage:
scrollbar-width: auto; /* 使用浏览器默认的滚动宽度 */ scrollbar-width: thin; /* 设置比默认滚动条宽度更窄的宽度 */ scrollbar-width: none; /* 隐藏滚动条，但是元素还是可以滚动 */ scrollbar-width: 66px; /* 直接设置滚动条的宽度，比如 60px 3vh 4wh 5rem 6rm 等长度 */
Attribute value:
<!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>
<!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>
<!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>
（Learning video sharing:
The above is the detailed content of What properties does Firefox support using css to change the scroll bar?. For more information, please follow other related articles on the PHP Chinese website!