百宝箱系列之01篇：CSS修改全局滚动条样式

代码如下：

/* 滚动条样式修改 */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  border-radius: 3px; /*滚动条的背景区域的圆角*/
  background-color: #fdf8f5; /*滚动条的背景颜色*/
}
::-webkit-scrollbar-thumb {
  border-radius: 3px; /*滚动条的圆角*/
  background-color: rgba(15,160,129,0.5); /*滚动条的背景颜色*/
}
 
::-webkit-scrollbar-thumb:hover {
  background-color: rgba(15,160,129,1);/*鼠标移动上的滚动快背景色*/
}
 
::-webkit-scrollbar-thumb:active {
  background-color: rgba(15,160,129,1);
  cursor: pointer;
}

效果如下：

默认状态：

hover状态：