详解 CSS3 自定义滚动条样式写法

CSS3 中提供了一种自定义滚动条的方法，可以通过 CSS 样式来控制滚动条的外观样式和布局等。下面将详细讲解如何实现自定义滚动条样式。

步骤1. 添加样式到滚动条

在 CSS3 中，我们可以使用 ::-webkit-scrollbar 伪元素来控制滚动条的样式。

::-webkit-scrollbar {
  width: 10px;             /* 滚动条的宽度 */
  height: 10px;            /* 滚动条的高度 */
  background-color: #f1f1f1;         /* 滚动条的背景颜色 */
}

步骤2. 自定义滚动条的拖拽滑块

::-webkit-scrollbar-thumb 伪元素可以控制滚动条的拖拽滑块的样式，可以通过 background-color 控制颜色，border-radius 控制圆角度数等。

::-webkit-scrollbar-thumb {
  background-color: #555;       /* 滑块的颜色 */
  border-radius: 5px;           /* 圆角的弧度 */
}

步骤3. 控制滚动条的拖拽区域

使用 ::-webkit-scrollbar-track 伪元素，可以改变滑道的外观。

::-webkit-scrollbar-track {
  background-color: #f1f1f1;    /* 滑道的背景颜色 */
  border-radius: 0px;           /* 滑道边框圆角的效果，数字可以调整幅度 */
}

步骤4. 控制滚动条的拖拽按钮

使用 ::-webkit-scrollbar-button 定义滚动条的四个按钮的样式。

::-webkit-scrollbar-button {
  background-color: #ccc;       /* 按钮的背景颜色 */
  width: 0px;                   /* 按钮宽度，设为0实际上就是限制了按钮宽度 */
  height: 0px;                  /* 按钮高度，同理0表示没有按钮 */
}

案例一：自定义滚动条

下面是一个自定义滚动条的 CSS3 代码示例，效果如图。我们可以通过修改样式来实现不同的滚动条外观。

.container::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.container::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 10px;
}

.container::-webkit-scrollbar-track {
  background: #ffffff;
  border-radius: 10px;
  box-shadow: inset 0px 0px 5px rgba(0, 0, 0, 0.3);
}

案例二：双边阴影滚动条

下面是一个具有双边阴影效果的滚动条样式代码示例，效果如图。我们可以通过修改样式实现不同的滚动条效果。

.container::-webkit-scrollbar {
  width: 16px;
  background: #f5f5f5;
  border-radius: 10px;
}

.container::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 10px;
  box-shadow: inset 2px 2px 2px rgba(0, 0, 0, 0.5), inset -2px -2px 2px rgba(255, 255, 255, 0.5);
}

.container::-webkit-scrollbar-track {
  background: #f5f5f5;
  border-radius: 10px;
  box-shadow: inset 2px 2px 2px rgba(0, 0, 0, 0.1), inset -2px -2px 2px rgba(255, 255, 255, 0.5);
}

以上就是详解 CSS3 自定义滚动条样式写法的完整攻略，希望能对你有所帮助！