CSS - scrollbar-color 属性_CSS 菜鸟教程

CSS scrollbar-color 属性允许您设置滚动条、拇指和轨道的颜色样式。

滚动条拇指是滚动条的可移动部分，您可以上下拖动以滚动浏览网页的内容。滚动条轨道是滚动条的背景。

可能的值

auto − 默认值。浏览器将使用其默认的滚动条颜色。
<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>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 Color - 颜色值

以下示例演示如何使用 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>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 - scroll-snap-type 属性 CSS - scrollbar-width 属性 >>