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
    CSS vs. JS Animation: Which is Faster?

    How is it possible that JavaScript-based animation has secretly always been as fast — or faster — than CSS transitions? And, how is it possible that Adobe and Google consistently release media-rich mobile sites that rival the performance of native apps? This article serves as a point-by-point...

  • By
    39 Shirts – Leaving Mozilla

    In 2001 I had just graduated from a small town high school and headed off to a small town college. I found myself in the quaint computer lab where the substandard computers featured two browsers: Internet Explorer and Mozilla. It was this lab where I fell...

Incredible Demos

  • By
    CSS calc

    CSS is a complete conundrum; we all appreciate CSS because of its simplicity but always yearn for the language to do just a bit more. CSS has evolved to accommodate placeholders, animations, and even click events. One problem we always thought...

  • By
    Geolocation API

    One interesting aspect of web development is geolocation; where is your user viewing your website from? You can base your language locale on that data or show certain products in your store based on the user's location. Let's examine how you can...

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!