CSS - 滚动条

滚动条是 UI 元素，允许用户浏览不完全适合可见区域的长内容。

它们由带有可拖动拇指的垂直或水平条组成，使用户能够上下或从左到右移动内容。

在不同的浏览器和设备中测试滚动条样式以确保其按预期工作非常重要。

如何设置滚动条的样式？

创建一个容器元素（如 div）来保存内容和滚动条。
将容器元素的高度设置为固定值。
将 overflow： auto 属性添加到容器元素以启用滚动条。
使用 :-webkit-scrollbar 伪元素来设置滚动条的样式。
使用 CSS 属性（宽度、高度、背景颜色、边框、边框半径）自定义滚动条。

语法：


div {
	 	width: 370px;
	 	height: 120px;
	 	overflow: auto;	
}
div::-webkit-scrollbar {
	 	width: 15px;
}

滚动条选择器

对于 webkit 浏览器（Chrome、Safari、Edge），您可以使用以下伪元素来更改滚动条。

::-webkit-scrollbar 选择整个滚动条以设置其样式。
::-webkit-scrollbar-button 选择滚动条顶部和底部的按钮。
::-webkit-scrollbar-thumb 选择可拖动的滚动缩略图。
::-webkit-scrollbar-track 跟踪滚动条的背景。
::-webkit-scrollbar-track-piece 选择缩略的顶部和底部位置之间的滚动条轨道的中间部分。
::-webkit-scrollbar-corner 选择水平滚动条和垂直滚动条相交的滚动条的底角。
::-webkit-resizer 在滚动条底部选择可拖动的调整器。

创建自定义滚动条

以下示例演示如何使用CSS -webkit-scrollbar 伪元素创建基本滚动条并设置其样式。

例

此示例仅在 webkit 浏览器（Chrome、Safari、Edge）上正常运行。


<html>
<head>
<style>
	 	div {
	 	 	 width: 100%;
	 	 	 height: 120px;
	 	 	 background-color: #F1EFB0;
	 	 	 overflow: auto;	
	 	}
	 	div::-webkit-scrollbar {
	 	 	 width: 35px;
	 	}
	 	div::-webkit-scrollbar-track {
	 	 	 background: yellow;	
	 	}
	 	div::-webkit-scrollbar-thumb {
	 	 	 background: green;	
	 	 	 border-radius: 10px;
	 	}
	 	div::-webkit-scrollbar-thumb:hover {
	 	 	 background: darkgreen;	
	 	}
</style>
</head>

<body>
	 	<div>
	 	 	 <h3>
	 	 	 	 	Scrollbars using -webkit-scrollbar
	 	 	 </h3>
	 	 	 This block includes a large amount of content	
	 	 	 to demonstrate how scrollbars work when there	
	 	 	 is an overflow within an element box.	
	 	 	 They consist of vertical or horizontal bars	
	 	 	 with a draggable thumb, enabling users to	
	 	 	 move content up and down or left to right.
	 	 	 <br>
	 	 	 <strong>Changes Made:</strong>
	 	 	 <br>
	 	 	 Changed Scrollbar Thumb Color
	 	 	 <br>
	 	 	 Changed Scrollbar background Color
	 	 	 <br>
	 	 	 Add Hover effect to thumb
	 	</div>
</body>
</html>

设置 CSS 滚动条的样式

以下示例演示了如何使用 -webkit-scrollbar 伪元素设置滚动条的样式，以通过添加颜色、宽度、边框和边框半径来自定义其外观 -

例

此示例仅在 webkit 浏览器（Chrome、Safari、Edge）上正常运行。


<html>
<head>
<style>
	 	div {
	 	 	 width: 370px;
	 	 	 height: 120px;
	 	 	 background-color: #F1EFB0;
	 	 	 overflow: auto;	
	 	}
	 	div::-webkit-scrollbar {
	 	 	 width: 15px;
	 	}
	 	div::-webkit-scrollbar-track {
	 	 	 background: #90e9e4;
	 	}
	 	div::-webkit-scrollbar-thumb {
	 	 	 background: #e77f7f;
	 	 	 border-radius: 10px;
	 	 	 border: 3px solid yellow;
	 	}
	 	div::-webkit-scrollbar-thumb:hover {
	 	 	 background: #da3e3e;	
	 	}
	 	.heading{
	 	 	 color: #DC4299;
	 	 	 text-align: center;
	 	}
</style>
</head>
<body>
	 	<div>
	 	 	 <h3 class="heading">
	 	 	 	 	Scrollbars using -webkit-scrollbar
	 	 	 </h3>
	 	 	 This block includes a large amount of content	
	 	 	 to demonstrate how scrollbars work when there	
	 	 	 is an overflow within an element box.	
	 	 	 They consist of vertical or horizontal bars
	 	 	 with a draggable thumb, enabling users to	
	 	 	 move content up and down or left to right.
	 	</div>
</body>
</html>

CSS 滚动条相关属性

以下是与滚动条相关的 CSS 伪元素列表：

属性	值
-webkit-scrollbar	选择整个滚动条以设置其样式。
-webkit-scrollbar-button	选择滚动条顶部和底部的按钮。
-webkit-scrollbar-thumb	选择可拖动的滚动缩略图。
-webkit-scrollbar-track	跟踪滚动条的背景。
-webkit-scrollbar-track-piece	选择缩略的顶部和底部位置之间的滚动条轨道的中间部分。
-webkit-scrollbar-corner	选择水平滚动条和垂直滚动条相交的滚动条的底角。

打印本页