Firefox は、スクロール バーを変更するための 2 つの CSS プロパティをサポートしています: 1. スクロール バーの色プロパティは、要素のスクロール バーの色を設定するために使用されます。スクロール バー トラックとスクロール バーの色を制御できます。構文 "scrollbar -color:color|dark|light;"; 2. スクロールバー幅属性は、表示時の要素のスクロール バーの幅または厚さを設定するために使用されます。構文は "scrollbar-width:薄い|なし|幅のサイズ値;"。
このチュートリアルの動作環境: Windows 7 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。
Firefox のスクロール バー スタイルを変更できる CSS プロパティは、scrollbar-color と scrollbar-width だけです。
scrollbar-color プロパティ
scrollbar-color プロパティは、要素のスクロール バーの色を設定するために使用されます。これを使用して、スクロールバー トラックとスクロールバーのサムの色をそれぞれ制御できます。スクロール バーのトラックはスクロール バーの背景であり、固定されたままでスクロール可能な領域を示します。スクロール バーのサムは、スクロール バーの移動部分を指します。これは、スクロール バーの現在位置を表すトラックの上部にある浮動小数点数です。
track (トラック) はスクロール バーの背景を指し、通常はスクロール位置に関係なく固定されています。
サムは、通常はトラックの上に浮いているスクロール バーの可動部分を指します。
文法:
scrollbar-color:auto | color | dark | light
##auto | at Theスクロール バーのトラック部分は、他の関連するスクロール バーの色のプロパティなしでデフォルトのプラットフォームでレンダリングされます。 |
dark | 黒いスクロール バー (プラットフォームによって提供されるスクロール バーの暗いバージョン、または暗い色のカスタム) を表示します。スクロールバー。 |
light | プラットフォームによって提供されるスクロールバーのわずかなバリエーション、または明るい色のカスタム スクロール バーを使用して、軽量のスクロールバーを表示します。 。 |
|
<!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 プロパティscrollbar-width プロパティを使用すると、開発者はスクロール バーが表示されるときの太さを設定できます
scrollbar-width プロパティを使用して設定します要素が表示されているときのスクロールバー ストリップの幅または厚さ。この属性は、ユーザー インターフェイスで要素をより目立つように表示する必要があるページで使用でき、スクロール バーの幅を減らすことで要素のためのスペースが広がります。
構文:
scrollbar-width:auto | thin | none |len
使用法:
scrollbar-width: auto; /* 使用浏览器默认的滚动宽度 */ scrollbar-width: thin; /* 设置比默认滚动条宽度更窄的宽度 */ scrollbar-width: none; /* 隐藏滚动条，但是元素还是可以滚动 */ scrollbar-width: 66px; /* 直接设置滚动条的宽度，比如 60px 3vh 4wh 5rem 6rm 等长度 */
属性値:
<!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>
（学習ビデオ共有:
以上がFirefox は、CSS を使用してスクロール バーを変更することをサポートしていますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
