Show Overflow Scrollbars on OS X

By  on  

The update to OS X Lion implemented the scrolling idea of iOS mobiles, which is hiding a window (and other elements with scrolling) until the target area is tapped or swiped.  While that may seem like a minor change, in as far as basic usability, it's actually a big one, as you can't easily identify areas which may be holding more content.  This is a problem I recently faced and after some research, I found the solution to said problem, at least in WebKit.

The CSS

WebKit provides a whole host of stylable CSS selectors, some of which are almost native.  We'll use two of those to show scrollbars within the document:

::-webkit-scrollbar {
  -webkit-appearance: none;
  width: 7px;
}
::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background-color: rgba(0, 0, 0, .5);
  -webkit-box-shadow: 0 0 1px rgba(255, 255, 255, .5);
}

What's cool is that you can use any color to style scrollbars, but it may be best to stick to native colors.

This technique isn't something you'd use often but it has its place.  You can't fault users for wanting to see overflow, so if you encounter that situation, use the code provided above!

Recent Features

  • By
    JavaScript Promise API

    While synchronous code is easier to follow and debug, async is generally better for performance and flexibility. Why "hold up the show" when you can trigger numerous requests at once and then handle them when each is ready?  Promises are becoming a big part of the JavaScript world...

  • By
    Create a CSS Flipping Animation

    CSS animations are a lot of fun; the beauty of them is that through many simple properties, you can create anything from an elegant fade in to a WTF-Pixar-would-be-proud effect. One CSS effect somewhere in between is the CSS flip effect, whereby there's...

Incredible Demos

  • By
    Build a Calendar Using PHP, XHTML, and CSS

    One of the website features my customers love to provider their web users is an online dynamic calendar. An online calendar can be used for events, upcoming product specials, memos, and anything else you can think of. I've taken some time to completely...

  • By
    MooTools CountDown Plugin

    There are numerous websites around the internet, RapidShare for example, that make you wait an allotted amount of time before presenting you with your reward. Using MooTools, I've created a CountDown plugin that allows you to easily implement a similar system. The MooTools JavaScript The CountDown class...

Discussion

  1. I’m actually quite certain that the scrollbars disappeared in OS X Lion (http://en.wikipedia.org/wiki/Mac_OS_X_Lion#User_interface_changes)

    • Yep, you’re right! Thank you!

    • Henry

      Wikipedia must be wrong on this one! Using Lion right now with scrollbars, just the arrows that are missing.

  2. Henry

    Mountain Lion removed the scrollbars, I’m using Lion on my work machine right now and they’re here…

    https://dl.dropboxusercontent.com/u/6552509/Screen%20Shot%202013-10-22%20at%2016.27.40.png

  3. This is a big usability problem for us too! Thanks for the tip David!

  4. mihai

    Scrollbars always looked like crap. I’m glad they’re gone now.

  5. Be sure to check your -webkit styles on a PC. I found that I got the expected result on OS X. But the the PC result showed up looking like OS X. Not what the PC folks where expecting. End solution was don’t mess with scrollbars styles.

  6. Jake Love

    Is there any solution for this on Mac Firefox? I’ve looked and it doesn’t seem possible without JS. I woud prefer a pure CSS solution.

    Thoughts? Possible?

  7. By using WP Color Scrollbar You can change scrollbar color, border radius, scroll speed, width, border style & other settings & by using the options of this plugin. In this documentation, we’ll cover enough areas of the option panel for you to control the plugin effectively.

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!