Css滚动条样式

/* 设置滚动条 */
.wrap::-webkit-scrollbar{
  width: 1px;
  height: 20px;/*无效*/
  background: pink;
  border-radius: 5px;
  box-shadow: inset 0 0 5px 0 #000;
}
/* 设置滑动轨道 */
.wrap::-webkit-scrollbar-track{
  border-radius: 5px;
  box-shadow: inset 0 0 5px 0 yellow;
}
/* 设置滑块 */
.wrap::-webkit-scrollbar-thumb{
  width: 10px; /*无效*/
  height: 10px; /*无效*/
  background: red;
  border-radius: 5px;
  box-shadow: inset 0 0 5px 0 #000;
}
/* 
::-webkit-scrollbar 滚动条整体部分
::-webkit-scrollbar-thumb  滚动条里面的小方块，能向上向下移动（或往左往右移动，取决于是垂直滚动条还是水平滚动条）
::-webkit-scrollbar-track  滚动条的轨道（里面装有Thumb）
::-webkit-scrollbar-button 滚动条的轨道的两端按钮，允许通过点击微调小方块的位置。
::-webkit-scrollbar-track-piece 内层轨道，滚动条中间部分（除去）
::-webkit-scrollbar-corner 边角，即两个滚动条的交汇处
::-webkit-resizer 两个滚动条的交汇处上用于通过拖动调整元素大小的小控件
*/
/* ie */
.wrap{
  scrollbar-arrow-color: #f4ae21; /**//*三角箭头的颜色*/ 
  scrollbar-face-color: #333; /**//*立体滚动条的颜色*/ 
  scrollbar-3dlight-color: #666; /**//*立体滚动条亮边的颜色*/ 
  scrollbar-highlight-color: #666; /**//*滚动条空白部分的颜色*/ 
  scrollbar-shadow-color: #999; /**//*立体滚动条阴影的颜色*/ 
  scrollbar-darkshadow-color: #666; /**//*立体滚动条强阴影的颜色*/ 
  scrollbar-track-color: #666; /**//*立体滚动条背景颜色*/ 
  scrollbar-base-color:#f8f8f8; /**//*滚动条的基本颜色*/
}