如何用CSS自定义滚动条样式？滚动条伪元素包括哪些，分别代表哪个部分，都有什么作用？这篇文章将给出解释，并一步一步介绍如

浏览器默认的滚动条是这样的：

这篇文章将一步一步介绍如何给滚动条一个漂亮的样式。最终效果如下：

滚动条伪元素

1. ::-webkit-scrollbar

::-webkit-scrollbar是整个scrollbar的背景，通常会被其它元素盖住，这个元素通常被用来定义宽度（纵向滚动条）和高度（横向滚动条）。

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

2. ::-webkit-scrollbar-button

::-webkit-scrollbar-button代表了方向按钮，对于纵向的滚动条，向上的按钮是::-webkit-scrollbar-button:vertical:decrement，向下的按钮是::-webkit-scrollbar-button:vertical:increment。

由于我的项目是PC web页面，不需要这个按钮，于是这里的CSS如下：

*::-webkit-scrollbar-button {
  width: 0;
  height: 0;
}

3. ::-webkit-scrollbar-corner

::-webkit-scrollbar-corner是纵向和横向滚动条重合的拐角处，这里我把颜色设为透明：

*::-webkit-scrollbar-corner {
  background-color: transparent;
}

4. ::-webkit-scrollbar-thumb

::-webkit-scrollbar-thumb是这个可以被拖拽的滑块，这里我也调整一下宽度，border和颜色：

*::-webkit-scrollbar-thumb {
  min-height: 12px;
  border: 4px solid transparent;
  background-clip: content-box;
  border-radius: 7px;
  background-color: #c8d5e1;
}

另外我鼠标hover在这个滑块上，颜色会稍微加深，当鼠标拖拽时，颜色会进一步加深：

*::-webkit-scrollbar-thumb:hover {
  background-color: #a8bbcf;
}
*::-webkit-scrollbar-thumb:active {
  background-color: #87a2bd;
}

5. ::-webkit-scrollbar-track

::-webkit-scrollbar-track和::-webkit-scrollbar-track-piece都代表了这个滚动条下面的滚动槽，::-webkit-scrollbar-track-piece是覆盖在::-webkit-scrollbar-track上方的，这里我都设置为透明色。

*::-webkit-scrollbar-track {
  background-color: transparent;
}
*::-webkit-scrollbar-track-piece {
  background-color: transparent;
}

总结

整个样式代码如下：

*::-webkit-scrollbar {
  width: 14px;
  height: 14px;
}
*::-webkit-scrollbar-button {
  width: 0;
  height: 0;
  display: none;
}
*::-webkit-scrollbar-corner {
  background-color: transparent;
}
*::-webkit-scrollbar-thumb {
  min-height: 12px;
  border: 4px solid transparent;
  background-clip: content-box;
  border-radius: 7px;
  background-color: #c8d5e1;
}
*::-webkit-scrollbar-thumb:hover {
  background-color: #a8bbcf;
}
*::-webkit-scrollbar-thumb:active {
  background-color: #87a2bd;
}
*::-webkit-scrollbar-track {
  background-color: transparent;
}
*::-webkit-scrollbar-track-piece {
  background-color: transparent;
}

效果如下：