自定义 CSS 滚动条样式

1. 选择器和伪类

要自定义滚动条样式，我们可以使用一系列的选择器和伪类来选择滚动条的不同部分。以下是一些常用的选择器和伪类：

• ::-webkit-scrollbar：选择 WebKit 浏览器的滚动条。
• ::-webkit-scrollbar-track：滚动条的轨道部分。
• ::-webkit-scrollbar-thumb：滚动条的滑块部分。
• ::-webkit-scrollbar-button：滚动条的按钮部分。
• ::-webkit-scrollbar-corner：滚动条的角落部分。
• ::-webkit-scrollbar-track-piece：滚动条的轨道片段。
• ::-webkit-scrollbar-thumb:hover：滚动条滑块在鼠标悬停时的样式。
• ::-webkit-scrollbar-thumb:vertical：垂直滚动条滑块的样式。
• ::-webkit-scrollbar-thumb:horizontal：水平滚动条滑块的样式。

• 2. 自定义样式

  通过使用上述选择器和伪类，我们可以对滚动条的不同部分应用自定义样式。下面是一个示例，展示如何自定义滚动条的样式：

  /* 滚动条整体样式 */
  ::-webkit-scrollbar {
    width: 10px; /* 滚动条宽度 */
  }
  
  /* 滚动条轨道样式 */
  ::