1. /* 滚动条 */
  2. ::-webkit-scrollbar-thumb:horizontal { /*水平滚动条的样式*/
  3. width: 5px;
  4. background-color: #CCCCCC;
  5. -webkit-border-radius: 6px;
  6. }
  7. ::-webkit-scrollbar-track-piece {
  8. background-color: #fff; /*滚动条的背景颜色*/
  9. -webkit-border-radius: 0; /*滚动条的圆角宽度*/
  10. }
  11. ::-webkit-scrollbar {
  12. width: 10px; /*滚动条的宽度*/
  13. height: 8px; /*滚动条的高度*/
  14. }
  15. ::-webkit-scrollbar-thumb:vertical { /*垂直滚动条的样式*/
  16. height: 50px;
  17. background-color: #999;
  18. -webkit-border-radius: 4px;
  19. outline: 2px solid #fff;
  20. outline-offset: -2px;
  21. border: 2px solid #fff;
  22. }
  23. ::-webkit-scrollbar-thumb:hover { /*滚动条的hover样式*/
  24. height: 50px;
  25. background-color: #9f9f9f;
  26. -webkit-border-radius: 4px;
  27. }

示意图

image.png