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
    9 Mind-Blowing WebGL Demos

    As much as developers now loathe Flash, we're still playing a bit of catch up to natively duplicate the animation capabilities that Adobe's old technology provided us.  Of course we have canvas, an awesome technology, one which I highlighted 9 mind-blowing demos.  Another technology available...

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

Incredible Demos

  • By
    LightFace:  Facebook Lightbox for MooTools

    One of the web components I've always loved has been Facebook's modal dialog.  This "lightbox" isn't like others:  no dark overlay, no obnoxious animating to size, and it doesn't try to do "too much."  With Facebook's dialog in mind, I've created LightFace:  a Facebook lightbox...

  • By
    Cross Browser CSS Box Shadows

    Box shadows have been used on the web for quite a while, but they weren't created with CSS -- we needed to utilize some Photoshop game to create them.  For someone with no design talent, a.k.a me, the need to use Photoshop sucked.  Just because we...

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!