CSS - ::webkit-scrollbar 属性

CSS ::webkit-scrollbar 伪元素

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

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

::-webkit-scrollbar-track − 用于设置滚动条轨道（边框、背景颜色）的样式。
::-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 伪元素来设置垂直滚动条的任何属性样式，例如其颜色、宽度、边框和圆角。

这是一个示例 −

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

打印页面