Advanced Search

Change the default scrollbar on webkit engines

/ Published in: CSS
Save to your folder(s)

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. /* Turn on a 16x16 scrollbar */
  2. ::-webkit-scrollbar {
  3.     width: 16px;
  4.     height: 16px;
  5. }
  6.  
  7. /* Turn on single button up on top, and down on bottom */
  8. ::-webkit-scrollbar-button:start:decrement,
  9. ::-webkit-scrollbar-button:end:increment {
  10.     display: block;
  11. }
  12.  
  13. /* Turn off the down area up on top, and up area on bottom */
  14. ::-webkit-scrollbar-button:vertical:start:increment,
  15. ::-webkit-scrollbar-button:vertical:end:decrement {
  16.     display: none;
  17. }
  18.  
  19. /* Place The scroll down button at the bottom */
  20. ::-webkit-scrollbar-button:end:increment {
  21.     background-image: url(images/scroll_cntrl_dwn.png);
  22. }
  23.  
  24. /* Place The scroll up button at the up */
  25. ::-webkit-scrollbar-button:start:decrement {
  26.     background-image: url(images/scroll_cntrl_up.png);
  27. }
  28.  
  29. /* Top area above thumb and below up button */
  30. ::-webkit-scrollbar-track-piece:vertical:start {
  31.     background-image: url(images/scroll_gutter_top.png), url(images/scroll_gutter_mid.png);
  32.     background-repeat: no-repeat, repeat-y;
  33. }
  34.  
  35. /* Bottom area below thumb and down button */
  36. ::-webkit-scrollbar-track-piece:vertical:end {
  37.     background-image: url(images/scroll_gutter_btm.png), url(images/scroll_gutter_mid.png);
  38.     background-repeat: no-repeat, repeat-y;
  39.     background-position: bottom left, 0 0;
  40. }
  41.  
  42. /* The thumb itself */
  43. ::-webkit-scrollbar-thumb:vertical {
  44.     height: 56px;
  45.     -webkit-border-image: url(images/scroll_thumb.png) 8 0 8 0 stretch stretch;
  46.     border-width: 8 0 8 0;
  47. }

URL: http://almaer.com/blog/tag/scrollbars

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.