::webkit-scrollbar 滚动条的相关属性

前两天又遇到这个问题，正好规整一下

::webkit-scrollbar 是一个CSS为类选择器，影响元素的滚动条的样式

• -webkit-scrollbar：滚动条的整体样式。
• -webkit-scrollbar-button：滚动条的按钮，用于向上或向下滚动内容。
• -webkit-scrollbar-track：滚动条的轨道部分，可以用来设置背景颜色。
• -webkit-scrollbar-track-piece：滚动条的轨道片段，可以用来设置背景颜色。
• -webkit-scrollbar-thumb：滚动条的拇指部分，即滑块本身。
• -webkit-scrollbar-corner：滚动条的角落部分。
• -webkit-resizer：滚动条的调整大小块。

对于每个属性，您可以使用以下属性进行自定义配置：

• width：设置滚动条的宽度。
• height：设置滚动条的高度。
• background-color：设置滚动条的背景颜色。
• border：设置滚动条的边框样式。
• border-radius：设置滚动条的边框半径。
• padding：设置滚动条内部内容与边框之间的间距。

以下是一个示例 CSS 规则，展示了如何使用这些属性来自定义滚动条样式：

/* 设置滚动条整体样式 */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

/* 设置滚动条拇指部分的样式 */
::-webkit-scrollbar-thumb {
  background-color: #999;
  border-radius: 5px;
}

/* 设置滚动条轨道部分的样式 */
::-webkit-scrollbar-track {
  background-color: #f1f1f1;
  border-radius: 5px;
}

 请注意，-webkit-scrollbar 属性只适用于使用 WebKit 内核的浏览器，如 Chrome 和 Safari。其他浏览器可能具有不同的滚动条样式配置方法。