I know that people using Lion will have nice, pretty scrollbars, but what about those of us who don't have Lion? I was wondering if we can add some iOS-like scrollbars to the site. I think that it would add more personality to the site.
Example here:

custom scrollbar

Obviously we'd have to make the scrollbars grey...but that's simple.

EDIT: Here's the code:

/* For the "inset" look only */
html {
    overflow: auto;
body {
    position: absolute;
    top: 1px;
    bottom: 1px;
    overflow-y: scroll;
    overflow-x: hidden;
/* Start Scrollbar */
::-webkit-scrollbar {
    width: 10px;
/* Track */
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 1px rgba(0,0,0,0.3);
    -webkit-border-radius: 10px;
    border-radius: 10px;
/* Handle */
::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 45px rgba(0,0,0,0.5);
::-webkit-scrollbar-thumb:window-inactive {
    background: rgba(255,0,0,0.4);
/* End Scrollbar */

Which gives you this:

Lion scrollbar

  • Lion scrollbars are ugly; please don't inflict them on people who have chosen not to subject themselves to Lion's aesthetic.
    – Daniel Mod
    Dec 24, 2011 at 3:21

1 Answer 1


I copied the code from above into a user stylesheet on userstyles.org.

If you want to try the scrollbars out, you can install Stylish for Chrome or for Firefox.
Go to the stylesheet and click Install.

Here's my personal opinion:
While I don't think that Lion's scrollbars are ugly, I do think that people should be able to use whatever scrollbars they like, be that their OS's scrollbars, their browser's scrollbars, or a custom stylesheet. Generally, sites that override that without a very good reason end up just being annoying

  • Ok, sounds good, Nathan! Thanks for the stylesheet too!
    – daviesgeek
    Dec 28, 2011 at 3:31

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .