ukamori

7.css scrollbar

Jul 25th, 2022
6,059
2
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 2.88 KB | None | 2 0
  1. <style>
  2. ::-webkit-scrollbar {
  3. width: 16px
  4. }
  5.  
  6. ::-webkit-scrollbar:horizontal {
  7. height: 17px
  8. }
  9.  
  10. ::-webkit-scrollbar-corner {
  11. background: #eee
  12. }
  13.  
  14. ::-webkit-scrollbar-track:vertical {
  15. background: linear-gradient(90deg, #e5e5e5, #f0f0f0 20%)
  16. }
  17.  
  18. ::-webkit-scrollbar-track:horizontal {
  19. background: linear-gradient(180deg, #e5e5e5, #f0f0f0 20%)
  20. }
  21.  
  22. ::-webkit-scrollbar-thumb {
  23. border: 1.5px solid #888;
  24. border-radius: 3px;
  25. box-shadow: inset 0 -1px 1px #fff, inset 0 1px 1px #fff;
  26. background-color: #eee;
  27. }
  28.  
  29. ::-webkit-scrollbar-thumb:vertical {
  30. background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAKCAIAAADpZ+PpAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAAEnQAABJ0Ad5mH3gAAADrSURBVChTTc5LboJQGAXguyoCu4ERCzAGlRk7UOwGWIDh0s4M4kxb06RSq/jAB6AxJkJ4lTDrue3AnvyzP+fLId+/yfM8juP7PQmCCOf7B3e+ZD+O40RRVFW12VQUpd3r9U3T2m4OpKoqWZYNwzBZLEqfh0N7NnvfrPcEWlEUWZb9mWF4Ph6D0ylcLbfM5HkeJrhGA2hb15/QXnv+w7RYXsDatjOdvnmrHSnLEizMNE2v11sUXQBCnn98kbquBUGQJAlmq9WB2e3qg4HJdqKkaRql1HGc0WgMcDJ5dd0F24kediZJ8t/ELT69H+8py0CYSIO5AAAAAElFTkSuQmCC") no-repeat 50%, linear-gradient(90deg, #eee 45%, #ddd 0, #bbb)
  31. }
  32.  
  33. ::-webkit-scrollbar-thumb:horizontal {
  34. background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAJCAYAAAALpr0TAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAAEnQAABJ0Ad5mH3gAAADcSURBVChTNZBLqoUwEEQrURQUxZGCvy24ACfiityJi7tv8GauQoPxk5tquA2RQ9vVVYk6z9NZaxFFEe77htYazjk8z4MwDIVZ+rourOuKaZrwvi+WZcE8z1BKCbPPCjk4DAO2bRP1OI7wLiL6Mbd7J408z1GWpQwWRYGqqiQG+03TgMu0MacfUN4qANmn8UOv9MjW3sKaSm7iIdOSlziOQ3LScd93aPonSYK6riVLlmVo21aYfVqzND9pmqLrOlGT+76XbcxLZkb19/l3fEP+oF0cx8KMEASBsDEGX2/CgZCHkg+8AAAAAElFTkSuQmCC") no-repeat 50%, linear-gradient(180deg, #eee 45%, #ddd 0, #bbb)
  35. }
  36.  
  37. ::-webkit-scrollbar-button:horizontal:end:increment,
  38. ::-webkit-scrollbar-button:horizontal:start:decrement,
  39. ::-webkit-scrollbar-button:vertical:end:increment,
  40. ::-webkit-scrollbar-button:vertical:start:decrement {
  41. display: block
  42. }
  43.  
  44. ::-webkit-scrollbar-button:vertical {
  45. height: 17px
  46. }
  47.  
  48. ::-webkit-scrollbar-button:vertical:start:decrement {
  49. background: white;
  50. background-image: url("https://cdn.discordapp.com/attachments/904308736712138793/1001299199633141851/download.png");
  51. background-repeat: no-repeat;
  52. background-position: center;
  53. -moz-background-size: cover;
  54. -webkit-background-size: cover;
  55. -o-background-size: cover;
  56. background-size: cover;
  57. }
  58.  
  59. ::-webkit-scrollbar-button:vertical:start:increment {
  60. display: none;
  61. }
  62.  
  63. ::-webkit-scrollbar-button:vertical:end:decrement {
  64. display: none;
  65. }
  66.  
  67. ::-webkit-scrollbar-button:vertical:end:increment {
  68. background: white;
  69. background-image: url("https://cdn.discordapp.com/attachments/904308736712138793/1001299200052576387/87ae92e1-3894-4469-b1b9-aedf5f04975c.png");
  70. background-repeat: no-repeat;
  71. background-position: center;
  72. -moz-background-size: cover;
  73. -webkit-background-size: cover;
  74. -o-background-size: cover;
  75. background-size: cover;
  76. }
  77.  
  78. </style>
Add Comment
Please, Sign In to add comment