CSS - ::-webkit-scrollbar 属性

上一页
下一页

CSS ::-webkit-scrollbar 伪元素

CSS ::-webkit-scrollbar 伪元素用于设置元素滚动条的样式。它是一个非标准 CSS 属性，仅受基于 WebKit 的浏览器（如 Chrome、Safari 和 Edge）支持。

以下 ::-webkit-scrollbar 伪元素可用于设置滚动条的样式：

  • ::-webkit-scrollbar-track − 为滚动条的轨道设置样式 （border， background-color.）
  • ::-webkit-scrollbar-thumb − 设置滚动条的拇指（可拖动滚动手柄）的样式。
  • ::-webkit-scrollbar-button − 为滚动条的按钮（向上和向下的箭头，一次滚动一行）设置样式。
  • ::-webkit-scrollbar-corner − 设置滚动条水平和垂直滚动条相交处的角的样式。
  • ::-webkit-resizer − 出现在某些元素底角的可拖动大小调整手柄。
  • ::-webkit-scrollbar：horizontal{} − 设置元素的水平滚动条的样式。
  • ::-webkit-scrollbar：vertical{} − 设置元素的垂直滚动条的样式。
  • ::-webkit-scrollbar-track-piece − 为手柄未覆盖的轨道部分（进度条）设置样式。

下图演示了滚动 webkit 结构以供参考：

滚动 Webkit 结构

以下示例演示了如何使用 -webkit-scrollbar CSS 伪元素来更改 WebKit 浏览器（如 Safari 和 Chrome）中滚动条的外观 -


<html>
<head>
<style>
	 	div {
	 	 	 width: 370px;
	 	 	 height: 120px;
	 	 	 scrollbar-color: #8b8484 #ddd;	
	 	 	 scroll-margin-block-end: 20px;
	 	 	 background-color: #F1EFB0;
	 	 	 overflow: auto;	
	 	}
	 	div::-webkit-scrollbar {
	 	 	 width: 15px;
	 	}
	 	div::-webkit-scrollbar-track {
	 	 	 background: #f1f1f1;	
	 	}
	 	div::-webkit-scrollbar-thumb {
	 	 	 background: #f02222; 	
	 	}
	 	div::-webkit-scrollbar-thumb:hover {
	 	 	 background: #f55d5d;
	 	}
	 	h3 {
	 	 	 color: #DC4299;
	 	}
</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 the content up and down or left to right.
	 	</div>
</body>
</html>

下面的示例演示如何使用 ::-webkit-scrollbar-button 伪元素来设置元素的滚动条按钮的样式。滚动条按钮是滚动条顶部和底部的两个箭头。


<html>
<head>
<style>
	 	div {
	 	 	 width: 370px;
	 	 	 height: 150px;
	 	 	 scrollbar-color: #8b8484 #ddd;	
	 	 	 scroll-margin-block-end: 20px;
	 	 	 background-color: #F1EFB0;
	 	 	 overflow: auto;	
	 	}
	 	div::-webkit-scrollbar {
	 	 	 width: 15px;
	 	}
	 	div::-webkit-scrollbar-track {
	 	 	 background: #f1f1f1;	
	 	}
	 	div::-webkit-scrollbar-thumb {
	 	 	 background: #888;	
	 	}
	 	div::-webkit-scrollbar-thumb:hover {
	 	 	 background: #555;	
	 	}
	 	div::-webkit-scrollbar-button {
	 	 	 height: 30px;
	 	 	 background-color: rgb(19, 201, 19);	
	 	 	 border: 2px solid rgb(245, 9, 155);
	 	 	 border-radius: 20px;
	 	}
	 	h3 {
	 	 	 color: #DC4299;
	 	}
</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 the content up and down or left to right.
	 	</div>
</body>
</html>

你可以使用 ::-webkit-scrollbar 伪元素来设置垂直滚动条的任何属性的样式，例如其颜色、宽度、边框和 border-radius。

下面是一个示例 -


<html>
<head>
<style>
	 	div {
	 	 	 width: 370px;
	 	 	 height: 120px;
	 	 	 scrollbar-color: #8b8484 #ddd;	
	 	 	 scroll-margin-block-end: 20px;
	 	 	 background-color: #F1EFB0;
	 	 	 overflow: auto;	
	 	}
	 	div::-webkit-scrollbar {
	 	 	 width: 15px;
	 	}
	 	div::-webkit-scrollbar-track:vertical {
	 	 	 background: #f1f1f1;	
	 	}
	 	div::-webkit-scrollbar-thumb:vertical {
	 	 	 background: rgb(16, 230, 16);
	 	 	 border-radius: 15px;
	 	}
	 	div::-webkit-scrollbar-thumb:vertical:hover {
	 	 	 background: rgb(224, 44, 209);	
	 	}
	 	h3 {
	 	 	 color: #DC4299;
	 	}
</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 the content up and down or left to right.
	 	</div>
</body>
</html>

你可以使用 ::-webkit-scrollbar-track-piece 伪元素来设置元素垂直滚动条的轨道段的样式。

下面是一个示例 -


<html>
<head>
<style>
	 	div {
	 	 	 width: 370px;
	 	 	 height: 120px;
	 	 	 scrollbar-color: #8b8484 #ddd;	
	 	 	 scroll-margin-block-end: 20px;
	 	 	 background-color: #F1EFB0;
	 	 	 overflow: auto;	
	 	}
	 	div::-webkit-scrollbar {
	 	 	 width: 15px;
	 	}
	 	div::-webkit-scrollbar-track-piece {
	 	 	 background-color: rgb(91, 210, 214); 	
	 	}
	 	div::-webkit-scrollbar-thumb {
	 	 	 background: rgb(21, 160, 21);
	 	 	 border-radius: 10px;	
	 	}
	 	div::-webkit-scrollbar-thumb:hover {
	 	 	 background: #e449dc;	
	 	}
	 	h3 {
	 	 	 color: #DC4299;
	 	}
</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 the content up and down or left to right.
	 	</div>
</body>
</html>

下面是一个示例，说明如何使用 -webkit-scrollbar CSS 属性（如 box-shadow 和 background-color 以及 border）在基于 WebKit 的浏览器中设置滚动条的样式 -


<html>
<head>
<style>
	 	div {
	 	 	 width: 370px;
	 	 	 height: 120px;
	 	 	 background-color: #F1EFB0;
	 	 	 overflow: auto;	
	 	}
	 	div::-webkit-scrollbar {
	 	 	 width: 15px;
	 	}
	 	div::-webkit-scrollbar-track {
	 	 	 box-shadow: inset 0 0 10px rgb(128, 197, 207);
	 	}
	 	div::-webkit-scrollbar-thumb {	
	 	 	 border: 1px solid #e21111;
	 	 	 background-color: #2ce43b;	
	 	 	 border-radius: 5px;	
	 	}
	 	div::-webkit-scrollbar-thumb:hover {
	 	 	 background: #e045c7;	
	 	 	 border: 1px solid #11e22d;
	 	}
	 	h3 {
	 	 	 color: #DC4299;
	 	}
</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 the content up and down or left to right.
	 	</div>
</body>
</html>

 

打印本页
上一页
下一页