Show Overflow Scrollbars on OS X
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!
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!
Wikipedia must be wrong on this one! Using Lion right now with scrollbars, just the arrows that are missing.
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
This is a big usability problem for us too! Thanks for the tip David!
Scrollbars always looked like crap. I’m glad they’re gone now.
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.
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?
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.