[关闭]
@zwh8800 2017-08-23T02:21:16.000000Z 字数 1627 阅读 190108

[转]一个 CSS3 的自定义滚动条

blog 归档 CSS3 滚动条


转载一个 css3 的自定义滚动条~


  1. ::-webkit-scrollbar {
  2. height:11px;
  3. width:11px
  4. }
  5. ::-webkit-scrollbar-button {
  6. height:0;
  7. width:0
  8. }
  9. ::-webkit-scrollbar-button:start:decrement,::-webkit-scrollbar-button:end:increment {
  10. display:block
  11. }
  12. ::-webkit-scrollbar-button:vertical:start:increment,::-webkit-scrollbar-button:vertical:end:decrement {
  13. display:none
  14. }
  15. ::-webkit-scrollbar-track:vertical,::-webkit-scrollbar-track:horizontal,::-webkit-scrollbar-thumb:vertical,::-webkit-scrollbar-thumb:horizontal,::-webkit-scrollbar-track:vertical,::-webkit-scrollbar-track:horizontal,::-webkit-scrollbar-thumb:vertical,::-webkit-scrollbar-thumb:horizontal {
  16. border-style:solid;
  17. border-color:transparent
  18. }
  19. ::-webkit-scrollbar-track:vertical::-webkit-scrollbar-track:horizontal{
  20. background-clip:padding-box;
  21. background-color:#fff;
  22. }
  23. ::-webkit-scrollbar-thumb {
  24. -webkit-box-shadow:inset 1px 1px 0 rgba(0,0,0,.1),inset 0 -1px 0 rgba(0,0,0,.07);
  25. background-clip:padding-box;
  26. background-color:rgba(0,0,0,.2);
  27. min-height:28px;
  28. padding-top:100
  29. }
  30. ::-webkit-scrollbar-thumb:hover {
  31. -webkit-box-shadow:inset 1px 1px 1px rgba(0,0,0,.25);
  32. background-color:rgba(0,0,0,.4)
  33. }
  34. ::-webkit-scrollbar-thumb:active {
  35. -webkit-box-shadow:inset 1px 1px 3px rgba(0,0,0,.35);
  36. background-color:rgba(0,0,0,.5)
  37. }
  38. ::-webkit-scrollbar-track:vertical,::-webkit-scrollbar-track:horizontal,::-webkit-scrollbar-thumb:vertical,::-webkit-scrollbar-thumb:horizontal {
  39. border-width:0;
  40. }
  41. ::-webkit-scrollbar-track:hover {
  42. -webkit-box-shadow:inset 1px 0 0 rgba(0,0,0,.1);
  43. background-color:rgba(0,0,0,.05)
  44. }
  45. ::-webkit-scrollbar-track:active {
  46. -webkit-box-shadow:inset 1px 0 0 rgba(0,0,0,.14),inset -1px -1px 0 rgba(0,0,0,.07);
  47. background-color:rgba(0,0,0,.05)
  48. }
添加新批注
在作者公开此批注前,只有你和作者可见。
回复批注