Skip to content

Instantly share code, notes, and snippets.

@jslegers
Created July 26, 2013 13:24
Show Gist options
  • Save jslegers/6088809 to your computer and use it in GitHub Desktop.
Save jslegers/6088809 to your computer and use it in GitHub Desktop.
A CodePen by Hugo Giraudel. Sass mixin for scrollbar styling - Because I can't ever remember the right syntax for scrollbars styling in WebKit, here is a little Sass mixin to do it for you.
@import "compass";
/**
* Mixin scrollbar
*/
@mixin scrollbar($size, $primary, $secondary: lighten($primary, 25%)) {
::-webkit-scrollbar {
width: $size;
height: $size;
}
::-webkit-scrollbar-thumb {
background: $primary;
}
::-webkit-scrollbar-track {
background: $secondary;
}
// For Internet Explorer
body {
scrollbar-face-color: $primary;
scrollbar-track-color: $secondary;
}
}
/**
* Call the damn thing
*/
@include scrollbar(.5em, tomato);
/**
* Force scrollbars
*/
body {
height: 3000px;
width: 3000px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment