CSS Scrollbar滚动条

CSS滚动条是指出现在多行文本框或区域的滚动条，CSS提供了样式化这些滚动条的选项，以使其与网站的设计更加一致。本文将介绍如何使用CSS来样式化浏览器的滚动条。

基础语法

要样式化滚动条，需要使用::-webkit-scrollbar伪元素。以下是样式化水平滚动条的基础语法：

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-thumb {
  background-color: #ccc;
  border-radius: 5px;
}

::-webkit-scrollbar-track {
  background-color: #f1f1f1;
}

在上面的代码中，::-webkit-scrollbar指定了滚动条的大小，同时::-webkit-scrollbar-thumb和::-webkit-scrollbar-track指定了滚动条上滑块和轨道的背景颜色和形状。

使用以上的CSS代码样式化滚动条后，效果如下图所示：

滚动条属性详解

除了基本的滚动条样式之外，CSS还有一些额外的属性可以用来控制滚动条的表现，这些属性包括：

• scrollbar-width：控制滚动条的宽度，默认值为auto，可以设置为thin、normal或thick。
• scrollbar-color：控制滚动条的颜色，参数为滚动条滑块和轨道的颜色。
• scrollbar-gutter：控制滚动条和内容之间的距离。

完整示例

以下是一个完整的示例，其中使用了以上的属性，以达到更优雅的滚动条样式。

/* 滚动条轨道 */
::-webkit-scrollbar-track {
  background-color: #f1f1f1;
}

/* 滚动条滑块：背景颜色、圆角 */
::-webkit-scrollbar-thumb {
  background-color: #ccc;
  border-radius: 5px;
}

/* 控制滚动条宽度 */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
  scrollbar-width: thin;
  scrollbar-color: #ccc #f1f1f1;
}

/* 控制滚动条和内容之间的距离 */
::-webkit-scrollbar-corner {
  background-color: #f1f1f1;
}

效果如下图所示：