Skip to content

Instantly share code, notes, and snippets.

@evadne
Created February 20, 2010 04:01
Show Gist options
  • Save evadne/309496 to your computer and use it in GitHub Desktop.
Save evadne/309496 to your computer and use it in GitHub Desktop.
Fancy Scrollbar (in WebKit). Written using LESS, needs gem to compile down to regular .CSS.
.siFancyScrollbar {
::-webkit-scrollbar,
::-webkit-scrollbar-button:start:increment,
::-webkit-scrollbar-button:start:decrement,
::-webkit-scrollbar-button:end:increment,
::-webkit-scrollbar-button:end:decrement {
width: 9px;
height: 9px;
display: none;
}
::-webkit-scrollbar,
::-webkit-scrollbar-button:start:decrement,
::-webkit-scrollbar-button:end:increment {
display: block;
}
::-webkit-scrollbar-track {
border-radius: 4.5px;
background: rgba(0, 0, 0, .15);
:disabled {
display: none;
}
}
::-webkit-scrollbar-thumb {
border-radius: 4.5px;
background: rgba(0, 0, 0, .25);
border: 1px inset rgba(0, 0, 0, .15);
-webkit-transition: background-color 2.5s linear;
}
:hover::-webkit-scrollbar-thumb {
background: rgba(0, 0, 0, .35);
}
::-webkit-scrollbar-thumb:hover {
background: rgba(0, 0, 0, .55);
}
}
@raashidA
Copy link

This not working in IE and Firefox :(

@lmvdz
Copy link

lmvdz commented Nov 17, 2016

This not working in IE and Firefox :(

-webkit is for chrome 👍

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