CSS 滚动条颜色属性允许您设置滚动条缩略图和轨道的颜色。
滚动条缩略图是滚动条的可移动部分,您可以上下拖动以滚动内容一个网页的。滚动条轨道是滚动条的背景。
属性值
auto: 默认值。浏览器将使用其默认滚动条颜色。
<color> <color>: 该属性可以采用两个值,一个用于滚动条滑块的颜色,一个用于滚动条轨道的颜色.
适用范围
滚动框。
DOM 语法
object.style.scrollbarColor= "auto|color color";
scrollbar-color 属性仅 Firefox 浏览器支持。
CSS 滚动条颜色: 自动值
以下示例演示如何使用scrollbar-color: auto 属性获取浏览器的默认滚动条颜色 -
<html>
<head>
<style>
.scroll-container {
width: 300px;
height: 150px;
overflow: auto;
scrollbar-color: 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-color</h1>
<p>A man can succeed at almost anything for which he has unlimited enthusiasm.</p>
<p>无论何事,只要对它有无限的热情你就能取得成功。</p>
</div>
</div>
</body>
</html>
CSS 滚动条颜色: 颜色值
以下示例演示如何使用scrollbar-color CSS 属性来更改滚动条轨道和滑块的颜色 -
<html>
<head>
<style>
.scroll-container {
width: 300px;
height: 150px;
overflow: auto;
scrollbar-color: pink yellow;
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-color</h1>
<p>A man can succeed at almost anything for which he has unlimited enthusiasm.</p>
<p>无论何事,只要对它有无限的热情你就能取得成功。</p>
</div>
</div>
</body>
</html>