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
    Interview with a Pornhub Web Developer

    Regardless of your stance on pornography, it would be impossible to deny the massive impact the adult website industry has had on pushing the web forward. From pushing the browser's video limits to pushing ads through WebSocket so ad blockers don't detect them, you have...

  • By
    Responsive Images: The Ultimate Guide

    Chances are that any Web designers using our Ghostlab browser testing app, which allows seamless testing across all devices simultaneously, will have worked with responsive design in some shape or form. And as today's websites and devices become ever more varied, a plethora of responsive images...

Incredible Demos

  • By
    Modal-Style Text Selection with Fokus

    Every once in a while I find a tiny JavaScript library that does something very specific, very well.  My latest find, Fokus, is a utility that listens for text selection within the page, and when such an event occurs, shows a beautiful modal dialog in...

  • By
    CSS @supports

    Feature detection via JavaScript is a client side best practice and for all the right reasons, but unfortunately that same functionality hasn't been available within CSS.  What we end up doing is repeating the same properties multiple times with each browser prefix.  Yuck.  Another thing 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!