这篇文章上次修改于 770 天前,可能其部分内容已经发生变化,如有疑问可询问作者。
/*
1. ::-webkit-scrollbar                滚动条整体部分
2. ::-webkit-scrollbar-thumb          滚动条里面的小方块,能向上向下移动(或向左向右移动)
3. ::-webkit-scrollbar-track          滚动条的轨道(里面装有Thumb)
4. ::-webkit-scrollbar-button         滚动条的轨道的两端按钮,由于通过点击微调小方块的位置。
5. ::-webkit-scrollbar-track-piece    内层轨道,滚动条中间部分
6. ::-webkit-scrollbar-corner         边角,即垂直滚动条和水平滚动条相交的地方
7. ::-webkit-resizer                  两个滚动条的交汇处上用于拖动调整元素大小的小控件
*/

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }
  ::-webkit-scrollbar-thumb {
    background: #becfd3;
    border-radius: 5px;
  }
  ::-webkit-scrollbar-thumb:hover {
    background: #9fcff7;
  }
  
  body::-webkit-scrollbar {
    border-left: 1px solid #eee;
    background: rgba(255, 255, 255, 0.6);
  }
  
  ::-webkit-scrollbar-track {
    border-radius: 5px;
  }
  ::-webkit-scrollbar-track:hover {
    background: rgba(0, 0, 0, 0.05);
  }