Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Like, basically PERFECT scrollbars
/**
* Like, basically PERFECT scrollbars
*/
/*
It's pure CSS.
Since a quick google search will confirm people going crazy about Mac OS Lion scrollbars...
this has no fade-out effect.
In Mac OS Lion, the lowest common denominator is always showing scrollbars by a setting.
So, this fits that lowest common denominator.
Facebook, lifehacker, and Google have all basically taken this approach. Of course Google uses incredibly ugly square scrollbars, but so be it.
Also, in regards to the fade in/out effect, this may just be one reason why soo many people outraged (and still hide) the ticker.
Ending note: I recommend this for non-lion users. As a lion user, I prefer my fading out scrollbars. If you sniff a UA of mac os lion, don't add this css.
*/
/* Turn on custom 8px wide scrollbar */
::-webkit-scrollbar {
width: 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:vertical {
/* 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:vertical:active {
background: rgba(0,0,0,0.61); /* Some darker color when you click it */
-webkit-border-radius: 100px;
}
background: linear-gradient(45deg, white, silver);
min-height: 100%;
/**
* Like, basically PERFECT scrollbars
*/
/*
It's pure CSS.
Since a quick google search will confirm people going crazy about Mac OS Lion scrollbars...
this has no fade-out effect.
In Mac OS Lion, the lowest common denominator is always showing scrollbars by a setting.
So, this fits that lowest common denominator.
Facebook, lifehacker, and Google have all basically taken this approach. Of course Google uses incredibly ugly square scrollbars, but so be it.
Also, in regards to the fade in/out effect, this may just be one reason why soo many people outraged (and still hide) the ticker.
Ending note: I recommend this for non-lion users. As a lion user, I prefer my fading out scrollbars. If you sniff a UA of mac os lion, don't add this css.
*/
/* Turn on custom 8px wide scrollbar */
::-webkit-scrollbar {
width: 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:vertical {
/* 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:vertical:active {
background: rgba(0,0,0,0.61); /* Some darker color when you click it */
-webkit-border-radius: 100px;
}
/*
After doing my first post here on Dabblet, I dug into their custom
scrollbar css.
here that is, I starred the box-shadow css for the nice pop.
section.page:not(.focus):not(:hover)::-webkit-scrollbar {
display: none;
}
::-webkit-scrollbar-track,::-webkit-scrollbar-thumb {
border: 5px solid transparent;
border-radius: 999px;
}
::-webkit-scrollbar-track {
** box-shadow: 1px 1px 5px rgba(0,0,0,.2) inset; **
}
::-webkit-scrollbar-thumb {
background: url(/img/noise.png);
background-clip: content-box;
** box-shadow: 0 0 0 5px hsla(24, 20%, 50%,.4) inset; **
min-height: 20px;
}
::-webkit-scrollbar-corner {
background: transparent;
}
*/
<!-- content to be placed inside <body>…</body> -->
What what? Checkout the scrollbar to the right -->
<p> lorem ipsum baller filler text </p>
<p> lorem ipsum baller filler text </p>
<p> lorem ipsum baller filler text </p>
<p> lorem ipsum baller filler text </p>
<p> lorem ipsum baller filler text </p>
<p> lorem ipsum baller filler text </p>
<p> lorem ipsum baller filler text </p>
<p> lorem ipsum baller filler text </p>
<p> lorem ipsum baller filler text </p>
<p> lorem ipsum baller filler text </p>
<p> lorem ipsum baller filler text </p>
<p> lorem ipsum baller filler text </p>
<p> lorem ipsum baller filler text </p>
<p> lorem ipsum baller filler text </p>
<p> lorem ipsum baller filler text </p>
<p> lorem ipsum baller filler text </p>
<p> lorem ipsum baller filler text </p>
<p> lorem ipsum baller filler text </p>
{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}
@liyanchang

This comment has been minimized.

Copy link

liyanchang commented Nov 10, 2013

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/

@bogdy29

This comment has been minimized.

Copy link

bogdy29 commented May 9, 2014

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

this is not working in Firefox for example.

@thesifter

This comment has been minimized.

Copy link

thesifter commented Aug 27, 2014

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

@jgolfetto

This comment has been minimized.

Copy link

jgolfetto commented Apr 10, 2015

Very nice scrollbars. Thanks for it. Cheers!

@thiagosjk

This comment has been minimized.

Copy link

thiagosjk commented Oct 6, 2015

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;
}

@nirpeled

This comment has been minimized.

Copy link

nirpeled commented Apr 5, 2016

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

@AlekzZz

This comment has been minimized.

Copy link

AlekzZz commented Dec 18, 2016

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

@amandaluu

This comment has been minimized.

Copy link

amandaluu commented Apr 20, 2017

Great scrollbars - thanks!

@ibufu

This comment has been minimized.

Copy link

ibufu commented May 27, 2017

nice

@linhuiw

This comment has been minimized.

Copy link

linhuiw commented Oct 30, 2017

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;
}
@umimehar

This comment has been minimized.

Copy link

umimehar commented Nov 26, 2017

Not working at firefox.....

@kabrice

This comment has been minimized.

Copy link

kabrice commented Mar 10, 2018

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

@Hu5ker

This comment has been minimized.

Copy link

Hu5ker commented Mar 13, 2018

@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.

@clucle

This comment has been minimized.

Copy link

clucle commented May 6, 2018

Thanks!!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.