43

I have a number of overflowed divs that I use to display a lot of content in small space (like long lists, etc). Giving the divs the CSS rule of overflow: auto; always worked like a charm, giving the user scroll bars to indicate more content was available.

This is kinda thrown out the window with Mac OS X Lion, which (as a default) hides the scroll bars unless you're actively scrolling. I like it when dealing with an application on my computer, because I think there are very strong visual clues that you can scroll to see more content. On webpage elements, it's a lot less clear, and I'm worried that my users won't know there's more content available (case in point: StackOverflow's "Questions with similar titles" when entering in a new question is a good example of this).

Is this a legitimate concern, or will Lion users know that if something appears to be cut off, it indicates that scrolling might be available? Are there any workarounds to, say, force browsers running on Lion to render scroll bars if it's an element on the page (and not the page itself)??

Felix Kling
  • 795,719
  • 175
  • 1,089
  • 1,143
neezer
  • 19,720
  • 33
  • 121
  • 220
  • Interesting question, I was thinking about that myself. I share the same thought that they are good indicators for that there is something scrollable. FWIW, the scrollbars do show up when you open a page, and then fade out... – Felix Kling Jul 25 '11 at 15:37
  • Are you sure Lion doesn't show scrollbars in these cases? I don't have Lion, so I can't test it. Good question though. – Gerben Jul 25 '11 at 15:41
  • 1
    iOS also don't show scroll bars, and I don't see people complaining about it. Take for example long code snippets here in StackOverflow: you can scroll them with two fingers and no bars will appear. – sidyll Jul 25 '11 at 15:44
  • 2
    @Gerben: It would look like this: http://i.imgur.com/IS4Ee.png Note that there are no scrollbars on the box for posts with similar titles. – Bill Lynch Jul 25 '11 at 15:47
  • @Gerben I was just working on a modal dialog (using jQuery UI) which contained a `ul` list with a fixed height and a long number of children `li`'s, and no scroll bars appeared without actively scrolling. I knew there was more content (because I made it), but I don't think all users will... thus my question. – neezer Jul 25 '11 at 15:48
  • @sidyll My feeling is the iOS users in general know that everything scrolls, so the expectation is already there. On a desktop, I feel that more clues are needed to tell a user that something is scrollable, especially if it's a smaller element on a larger page. My two cents on iOS, anyway. – neezer Jul 25 '11 at 15:52
  • 3
    Wow, I'm going to be very upset when I eventually get around to installing Lion, aren't I? *Where are my damn scrollbars!* – Cody Gray - on strike Jul 25 '11 at 15:54
  • I agree neezer, but not always everything is scrollable. Consider the one long line snippets on an iPad. You'll only know that it has more content if you try scrolling horizontally with 2 fingers. – sidyll Jul 25 '11 at 16:24
  • if you're ever interested in actually using the Lion scrollbars on a site, with the fade/in out effect, someone did that: http://learnboost.github.com/antiscroll/ – Devin Rhode Apr 29 '12 at 20:14

6 Answers6

12

I disagree with this. Yes, I understand the UI/UX argument. However some sites, especially the Horizontal approach for navigation would need this as users may not know navigation goes horizontally. A fix to force it however has been mentioned. I have found this works fine:

Open my code in Mac Safari Chrome etc (JS FIDDLE PREVIEW)

<style type="text/css">
#horiz_scroll::-webkit-scrollbar {
-webkit-appearance:none !important;
width:11px !important
}
#horiz_scroll::-webkit-scrollbar {
border-radius:8px !important;
border:2px solid white !important;
background-color:#ccc !important
}
#horiz_scroll::-webkit-scrollbar-thumb {
border-radius:8px !important;
border:2px solid white !important;
background-color:rgba(0,0,0,.5) !important
}
/*
// If you want it on hover //
#horiz_scroll::-webkit-scrollbar:active,
#horiz_scroll::-webkit-scrollbar:hover, 
#horiz_scroll::-webkit-scrollbar:focus{border-radius:8px !important;border:2px solid white !important;background-color:#ccc !important}
*/
</style>

<div id="horiz_scroll" style="width:943px;height:480px;overflow:auto"> 
  <!-- Just fit content inside this that scrolls horizontally. Example -->
  <table id="Table_01" height="350" border="0" cellpadding="0" cellspacing="0">
    <tr>
      <td>
        <div style="background:#eee;width:9000px;min-height:400px">hello</div>
      </td>
    </tr>        
  </table>
</div>
TheBlackBenzKid
  • 26,324
  • 41
  • 139
  • 209
  • 4
    Another great answer with some tweaks too: http://stackoverflow.com/a/7855592/596952 – TheBlackBenzKid Feb 14 '12 at 10:56
  • I used this.. with some fixes. The jQuery jsFiddle you posted works on iPad so that is what we needed! – AlphaApp Jul 13 '12 at 09:51
  • 1
    This is nice and all, but if the user has scrollbars set to always display, then they get two scrollbars. – CanSpice Mar 18 '13 at 01:46
  • 1
    @CanSpice - We no longer use these solutions - we have an adapted responsive design with other UI and UX features so we work cross browser and cross device ready - no need for them. Thanks for the point; quick hacks always have issues and will always leak.. – TheBlackBenzKid Mar 18 '13 at 10:27
  • 1
    FYI: I just tried the fiddle, and while it works on the desktop, it does not work on iOS 6 or 7. The scrollbar does not appear. – Joshua Smith Mar 20 '14 at 21:54
  • Same here, on iOS 7 it looks like the scrollbar is entirely invisible. – RobW Mar 24 '14 at 14:25
  • 1
    @RobW - need to add `-webkit-overflow-scrolling: auto;` to get it to show on an iPhone in iOS 7. Lose the momentum scrolling though. – Brendan Jul 24 '14 at 17:48
7

Are there any workarounds to, say, force browsers running on Lion to render scroll bars if it's an element on the page

This is an attack. Let the system take care of it. If the user uses Lion, that's because they like this. And if they use it and don't like the new scroll bars, they will just change that in System Preferences.

sidyll
  • 57,726
  • 14
  • 108
  • 151
  • 1
    This is changeable in System Prefs? Oh thank heavens not everyone at Apple has lost their sanity. Then in that case, I **completely agree**. Respect the native platform UI. If the user likes their scrollbars to be hidden, then don't make them visible for your page. That's far more confusing and user-hostile than doing what you're expected to do. – Cody Gray - on strike Jul 25 '11 at 15:56
  • 4
    I agree as well, I just wish Apple had made it granular instead of blanket; I like not having scroll bars on pages, but I think getting rid of them on page elements might've been too much. Still, it felt comprehensive to ask if such a thing were possible. – neezer Jul 25 '11 at 15:59
  • @neezer: Yes I see. But mixing it could be confusing. Maybe they'll address this issue in future with some other kind of visual clue, like a shadow (by the way, you can use a shadow on your website and it will look nice even on systems with scroll bars). For now, it might be better to just get accustomed with. It's not that hard, specially with trackpads. If the users has a mouse, the standard behavior on preferences is "automatic based on input device", so no big deal. – sidyll Jul 25 '11 at 16:38
  • 1
    If users use Lion, it's because automatic updates did it for them, or any one of the pieces of software forced them to update manually. You're not being realistic. There is no way to stay on Leopard in 2013. In this case, you can opt out of the changed defaults. In other cases, you have no choice. You're forced to struggle sometimes a bit and sometimes a lot to get the simplest of things working or even find where they are. – Henrik Erlandsson Apr 11 '13 at 12:13
  • 1
    @HenrikErlandsson Thanks for your comment. I Agree. But this was written back in 2011 – sidyll Apr 11 '13 at 14:22
0

I was JUST dealing with this same issue. Here is the fix I found. It makes the scroll bar always appear with Safari on the Mac Air and iPad I tested with. Of course, this is only when there is more content to be seen. Not when all the content is shown.

::-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);
}
The Duke Of Marshall שלום
  • 1,663
  • 5
  • 18
  • 36
  • Can you provide a full working page that keeps the scrollbar visible in mobile safari/webview? I added this css to my webview html and it styles the scrollbar, but doesn't keep it visible. – Joe Beuckman Jun 27 '13 at 01:57
  • This will only work if you do not use -webkit-overflow-scrolling: touch. As soon as you add that, the scrollbar disappears. – Joshua Smith Mar 20 '14 at 21:55
0

Lion does take care of this itself by flashing the scrollbars on any scrollable element for an instant when it comes into view, giving the user an initial hint that there's more to scroll to. Of course, the user may or may not notice this. If the user is used to the Lion way of doing things, your website won't be the only place this happens and the user probably knows how to deal with it. If your boxen look "unscrollable" without scrollbars, you might want to give a stronger indication that they are scrollable, e.g. by having a clear border around the box with some cut-off content inside. This may be something you will want to do regardless of Lion.

If you can improve your UI to make scrollability more obvious, do it either way. Otherwise, if your content is presented in a way that suggests there's more, I wouldn't worry about missing scrollbars on a system were the user should be used to it.

You may want to take this to https://ux.stackexchange.com/ for some real expert opinions.

Community
  • 1
  • 1
deceze
  • 510,633
  • 85
  • 743
  • 889
  • 6
    "you might want to give a stronger indication that they are scrollable" - but that's what the _scrollbars_ are supposed to do. Developers shouldn't have to add additional styling just to deal with Apple's unorthodox design choices. – Paul Alexander Jan 21 '12 at 00:47
  • 1
    Sadly, what developer's shouldn't have to do has never held much precedence. Developer's never should have had to subject themselves to the various CSS hacks required for ie6. Developer's shouldn't have to write/use javascript library to fill in for standard html5 functionality like placeholder, video, etc while the browser vendors play catch-up. As a matter of fact, we don't have to. We choose to because it's damn hard to find work when you don't support one of the big 3 browsers. – Chris O'Kelly Nov 26 '12 at 06:27
0

OS X Lion is really just forcing the issue. Users of mobile browsers (both iOS and Andriod) have been bitching about this for ages ... the overflow trick does not work in general; you need to think harder about page design or look beyond standard browser behaviour and add javascript support for touch and scrolling (e.g. jqTouch).

Unfortunately, Lion's scrollbar behaviour doesn't just affect web sites. For example, it makes my vnc sessions to machines with large display settings pretty annoying (have to resize the vnc window to convince Lion to show me a scrollbar).

Doubly unfortunately, the solution is to go to "Preferences > General > Show scrollbars:" and set to "always". Kind of undoes any forward momentum that Apple may have been trying to build with Lion. But being able to actually use the damn thing is a general purpose trump card..

tardate
  • 16,424
  • 15
  • 50
  • 50
-2

Not being a mac user, I shall stay out of the philosophical discussion as to whether or not Lion should be hiding scroll bars.

As for forcing the scroll bars to appear in webpage elements, simply setting CSS's overflow: scroll does the trick. That sets both vertical and horizontal scrollbars to always appear, and it's pretty obvious when they don't have anything to scroll.

If you only want it to ever scroll vertically or horizontally, and not have the other dimension's scrollbar appear, you can use overflow-y: scroll or overflow-x: scroll respectively, instead of overflow: scroll. This works in all modern browsers, though not in IE8 and less.

Patches
  • 1,115
  • 1
  • 10
  • 13