Mac OS X Lion, scrollbars, and website usability

问题:

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)??

回答1:

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>

回答2:

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.

回答3:

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.

回答4:

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

回答5:

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);
}

回答6:

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.