CSS - 滚动条

滚动条是用户界面元素，允许用户浏览无法完全显示在可见区域内的长内容。

它们由垂直或水平条组成，带有一个可拖动的滑块，使用户能够向上/向下或向左/向右移动内容。

务必在不同的浏览器和设备上测试您的滚动条样式，以确保其按预期工作。

如何设置滚动条样式？

创建一个容器元素，例如 div，以容纳内容和滚动条。
将容器元素的高度设置为固定值。
将 overflow: auto 属性添加到容器元素以启用滚动条。
使用 :-webkit-scrollbar 伪元素来设置滚动条的样式。

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

使用 CSS 属性（宽度、高度、背景颜色、边框、圆角）自定义滚动条。

滚动条选择器

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

::-webkit-scrollbar 选择整个滚动条以设置其样式。
::-webkit-scrollbar-button 选择滚动条顶部和底部的按钮。
::-webkit-scrollbar-thumb 选择可拖动的滚动滑块。
::-webkit-scrollbar-track 选择滚动条的背景轨道。
::-webkit-scrollbar-track-piece 选择滚动条轨道中滑块顶部和底部位置之间的中间部分。
::-webkit-scrollbar-corner 选择滚动条的底部角，即水平和垂直滚动条的交汇处。
::-webkit-resizer 选择滚动条底部可拖动的调整器。

创建自定义滚动条

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

示例

此示例仅在 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 伪元素设置滚动条的样式，通过添加颜色、宽度、边框和圆角来自定义其外观 -

示例