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-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>
