css好看的滚动条

浏览器自带的滚动条通常比较丑，使用如下代码可以改变滚动条的样式。 其中 ::-webkit-scrollbar-thumb下的background-color 和 ::-webkit-scrollbar-track下面的background可以用于调整颜色

::-webkit-scrollbar {
  /*整体样式*/
  width: 10px; 
  height: 9px;
}
::-webkit-scrollbar-track {
  /*轨道*/
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  /* background: #ededed; */
  background: #333;
  border-radius: 10px;
}
::-webkit-scrollbar-thumb {
  /*滚动条小方块*/
  border-radius: 10px;
  /* background-color: #2e75d3; */
  background-color: #888;
  background-image: -webkit-linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.2) 25%,
    transparent 25%,
    transparent 50%,
    rgba(255, 255, 255, 0.2) 50%,
    rgba(255, 255, 255, 0.2) 75%,
    transparent 75%,
    transparent
  );
}

效果如下