Too Epic // Emergent Trend: Custom Scrollbars

Jan 12 9:54 pm

Emergent Trend: Custom Scrollbars

The recent redesigns of maxvoltar.com and ~~orderedlist.com~~ both feature a design subtlety that I haven’t formerly seen in the wild (omitting webkit.org):

Minute as they may seem, the custom scrollbars are a nice touch, offering the designer that much more control over the viewing experience (provided you’re using Chrome or Safari, of course). I’m guessing we’ll start seeing many more sites donning custom scrollbars as we move into 2010.

If you’re interested in how the effect is achieved, here are the relevant bits of CSS for hiding the default scrollbar (extracted from Maxvoltar’s stylesheet):

// the @media stuff is for viewers on mobile devices
 
html {
    overflow: hidden;
}
 
@media only screen and (max-device-width:480px) {
    html {
        overflow: auto;
    }
}
 
body {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 10px; // could be a different value
    overflow-y: scroll;
    overflow-x: hidden;
}
 
@media only screen and (max-device-width:480px) {
    body {
        position: relative;
        top: auto;
        right: auto;
        bottom: auto;
        left: auto;
        overflow: auto;
    }
}

Beyond that, it’s just a matter of styling the scrollbars to your liking. Check out Ordered List’s style sheet as a starting point.

For whatever reason, in-page scrollbars don’t play nice with some of Safari’s keyboard shortcuts (command up/down, spacebar), but page up/down still function as expected.

I guess I’ll start counting down the days before this becomes as commonplace and abused as rounded corners. The irony of it all is that Internet Explorer was actually the first to implement scrollbar styling. We’re ten years late to the party.

Update: Looks like Ordered List has removed their custom scrollbar for the time being. I think it might be my fault.