修改滚动条的样式

//滚动条整体部分，它的属性有width,height,background,border等
body::-webkit-scrollbar {
  width: 10px;        // width 是设置 Y 轴滚动条的宽度，右侧的滚动条。height对 Y 轴不起作用
  height：10px;  // height 是设置 X 轴滚动条的高度，也就是底部的滚动条。width对 X 轴不起作用
  //background-color: #f00;
}
// 滚动条里面可以拖动的部分，滑块
body::-webkit-scrollbar-thumb {
  background-color: rgba(0,0,0,1);
  border-radius: 10px;
  -webkit-box-shadow: inset 1px 50px 5px 2px rgba(255,255,255,1);
}
// 鼠标悬浮在该类指向的控件上时滑块的样式*
body:hover::-webkit-scrollbar-thumb {
  background-color: pink;
  border-radius: 10px;
  -webkit-box-shadow: inset 1px 50px 5px 2px rgba(99,199,255,1);
}
// 鼠标悬浮在滑块上时滑块的样式
body::-webkit-scrollbar-thumb:hover {
  background-color: yellow;
  -webkit-box-shadow: inset 1px 50px 5px 2px blue;
}
// 外层轨道部分，当不需要时可以用display:none将其隐藏，也可以添加想要的颜色
body::-webkit-scrollbar-track {
  border-radius: 10px;
  margin-top: 20px;
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,1);
  background-color: white;
}
// 鼠标悬浮在滚动条上的主干部分
body::-webkit-scrollbar-track:hover {
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.4);
  background-color: #00ff00;
}
// 滚动条的轨道的两端按钮，允许通过点击微调小方块的位置, 不需要时可以用display:none将其隐藏
body::-webkit-scrollbar-button {
  display: none;
}
// 内层轨道部分，滚动条中间的部分
//body::-webkit-scrollbar-track-piece {}
// 边角部分,两个滚动条交汇处
//body::-webkit-scrollbar-corner {}
//两个滚动条交汇处用于拖动调整元素大小的小控件（基本用不上）
//body::-webkit-resizer {}