devinrhode2/clean-scrollbar.css

This worked really well. Only modification I made was to add a bit of padding. Thanks.

::-webkit-scrollbar {
width: 10px;
}

::-webkit-scrollbar-thumb:vertical {
background-clip: padding-box;
border: 2px solid rgba(0, 0, 0, 0);
min-height: 30px;
}

http://jsfiddle.net/T79v7/

perfect scrollbar ? is useless, webkit works only in chrome.

this is not working in Firefox for example.

FWIW it does work in FF , and it's not useless, thanks for the effort.

Very nice scrollbars. Thanks for it. Cheers!

I changed a bit your code and now it works on vertical and horizontal scroll:

::-webkit-scrollbar {
width: 8px; /* 1px wider than Lion. /
height: 8px; / 1px wider than Lion. /
/ This is more usable for users trying to click it. /
background-color: rgba(0,0,0,0);
-webkit-border-radius: 100px;
}
/ hover effect for both scrollbar area, and scrollbar 'thumb' */
::-webkit-scrollbar:hover {
background-color: rgba(0, 0, 0, 0.09);
}

/* The scrollbar 'thumb' ...that marque oval shape in a scrollbar /
::-webkit-scrollbar-thumb {
/ This is the EXACT color of Mac OS scrollbars.
Yes, I pulled out digital color meter /
background: rgba(0,0,0,0.5);
-webkit-border-radius: 100px;
}
::-webkit-scrollbar-thumb:active {
background: rgba(0,0,0,0.61); / Some darker color when you click it */
-webkit-border-radius: 100px;
}

Awesome!! Any way to achieve the same effect for other browsers as well?

Thank you for this! Looks great in my Electron app 👍

Great scrollbars - thanks!

nice

Also can update this,
support vertical scrollbar min-height & horizontal scrollbar min-width.

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
    background-color: rgba(0,0,0,0);
    -webkit-border-radius: 100px;
}

::-webkit-scrollbar:hover {
    background-color: rgba(0, 0, 0, 0.09);
}

::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.5);
    -webkit-border-radius: 100px;
}
::-webkit-scrollbar-thumb:active {
    background: rgba(0,0,0,0.61); / Some darker color when you click it */
    -webkit-border-radius: 100px;
}

/* add vertical min-height & horizontal min-width */
::-webkit-scrollbar-thumb:vertical {
  min-height: 10px;
}
::-webkit-scrollbar-thumb:horizontal {
  min-width: 10px;
}

Not working at firefox.....

Any way to make it work also on Firefox, IE and others browsers ?

@kabrice
Firefox never have the support. See https://bugzilla.mozilla.org/show_bug.cgi?id=77790
As far I know, until 5.5 IE this worked fine, but they dropped the function. Maybe im wrong on this one.
It should work on webkit based web browsers.

The only solution to all browsers is to use a javascript plugin or something that can replace the scrollbar with a custom one.

Thanks!!

I've literally never seen any of these comments... You know gist in the old days... 👀

Love it! Thanks

@bogdy29

how about you not be rude when trying out someone's free piece of code?

hi! protip: that oval shape is callled a pill not really a well known fact!