CSS自定义滚动条样式 -webkit-scrollbar

滚动条从外观来看是由两部分组成：
1，可以滑动的部分，我们叫它滑块
2，滚动条的轨道，即滑块的轨道，一般来说滑块的颜色比轨道的颜色深。

滚动条的css样式主要有三部分组成：
1、::-webkit-scrollbar 定义了滚动条整体的样式；
2、::-webkit-scrollbar-thumb 滑块部分；
3、::-webkit-scrollbar-thumb 轨道部分；

透明滚动条

::-webkit-scrollbar {
  width: 10px; 
  height: 100px;
 }
 ::-webkit-scrollbar-thumb{
  border-radius: 1em;
  background-color: rgba(50,50,50,.3);
  -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
 // background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent); /*图片轨道*/
 }
::-webkit-scrollbar-track{
  border-radius: 1em;
  background-color: rgba(50,50,50,.1);
  -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
}