Skip to content

Instantly share code, notes, and snippets.

@phaberest

phaberest/CSS Scrollbars webkit

Created April 9, 2013 11:59
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save phaberest/5345139 to your computer and use it in GitHub Desktop.
Save phaberest/5345139 to your computer and use it in GitHub Desktop.
Download ZIP
CSS Styled scrollbars on webkit
Raw
CSS Scrollbars webkit
/* For the "inset" look only */
html {
overflow: auto;
}
body {
position: absolute;
top: 20px;
left: 20px;
bottom: 20px;
right: 20px;
padding: 30px;
overflow-y: scroll;
overflow-x: hidden;
}
/* Let's get this party started */
::-webkit-scrollbar {
width: 12px;
}
/* Track */
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
-webkit-border-radius: 10px;
border-radius: 10px;
}
/* Handle */
::-webkit-scrollbar-thumb {
-webkit-border-radius: 10px;
border-radius: 10px;
background: rgba(255,0,0,0.8);
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
::-webkit-scrollbar-thumb:window-inactive {
background: rgba(255,0,0,0.4);
}
@phaberest
Copy link
Author

http://css-tricks.com/custom-scrollbars-in-webkit/

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment