macos Mac OS X Lion、滚动条和网站可用性
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6818466/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Mac OS X Lion, scrollbars, and website usability
提问by neezer
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.
我有许多溢出的 div，用于在小空间（如长列表等）中显示大量内容。赋予 divoverflow: auto;总是像魅力一样工作的 CSS 规则，为用户提供滚动条以指示更多内容可用。
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 canscroll 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).
这有点被 Mac OS X Lion 抛出窗口，它（默认情况下）隐藏滚动条，除非您正在主动滚动。在我的计算机上处理应用程序时，我喜欢它，因为我认为有非常强烈的视觉线索，您可以滚动查看更多内容。在网页元素上，它不太清楚，我担心我的用户不会知道有更多可用内容（例如：输入新问题时 StackOverflow 的“具有相似标题的问题”就是一个很好的例子）。
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)??
这是一个合理的问题，还是 Lion 用户是否知道如果某些内容似乎被切断，则表明可能可以进行滚动？如果滚动条是页面上的元素（而不是页面本身），是否有任何解决方法可以强制在 Lion 上运行的浏览器呈现滚动条？
回答by TheBlackBenzKid
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:
我不同意这一点。是的，我理解 UI/UX 的论点。但是，某些站点，尤其是用于导航的 Horizontal 方法需要这样做，因为用户可能不知道导航是水平的。然而，已经提到了强制它的修复。我发现这很好用：
Open my code in Mac Safari Chrome etc (JS FIDDLE PREVIEW)
在 Mac Safari Chrome 等中打开我的代码（JS FIDDLE 预览）
<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>
回答by sidyll
Are there any workarounds to, say, force browsers running on Lion to render scroll bars if it's an element on the page
是否有任何解决方法可以强制在 Lion 上运行的浏览器呈现滚动条（如果它是页面上的元素）
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.
这是一次攻击。让系统来处理它。如果用户使用Lion，那是因为他们喜欢这个。如果他们使用它并且不喜欢新的滚动条，他们只会在系统偏好设置中更改它。
回答by deceze
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.
Lion 确实通过在任何可滚动元素上的滚动条进入视图瞬间闪烁来解决此问题，从而为用户提供初始提示，即还有更多内容要滚动。当然，用户可能会也可能不会注意到这一点。如果用户习惯了 Lion 的做事方式，您的网站将不会是唯一发生这种情况的地方，用户可能知道如何处理它。如果您的boxen 在没有滚动条的情况下看起来“不可滚动”，您可能想要更强烈地表明它们是可滚动的，例如通过在 box 周围有一个清晰的边框，里面有一些截断的内容。无论 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.
如果您可以改进您的 UI 以使可滚动性更加明显，那么无论哪种方式都可以。否则，如果您的内容以暗示有更多内容的方式呈现，我不会担心用户应该习惯它的系统上缺少滚动条。
You may want to take this to https://ux.stackexchange.com/for some real expert opinions.
你可能想把它带到https://ux.stackexchange.com/以获得一些真正的专家意见。
回答by tardate
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 notwork 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).
OS X Lion 真的只是在强迫这个问题。手机浏览器（包括iOS和Andriod的）用户已经婆妈了好久了...溢出招的确不是一般的工作; 您需要更仔细地考虑页面设计或超越标准浏览器行为，并添加对触摸和滚动的 javascript 支持（例如 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).
不幸的是，Lion 的滚动条行为不仅仅影响网站。例如，它使我的 vnc 会话与具有大显示设置的机器非常烦人（必须调整 vnc 窗口的大小以说服 Lion 向我显示滚动条）。
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..
不幸的是，解决方案是转到“首选项>常规>显示滚动条：”并设置为“始终”。有点破坏苹果可能一直试图与 Lion 建立的任何前进动力。但是能够真正使用该死的东西是一张通用的王牌。
回答by The Duke Of Marshall ????
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.
我只是在处理同样的问题。这是我找到的修复程序。它使滚动条始终与 Safari 一起出现在我测试过的 Mac Air 和 iPad 上。当然，这只是在有更多内容可看的情况下。不是当所有内容都显示出来的时候。
::-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);
}
回答by Patches
Not being a mac user, I shall stay out of the philosophical discussion as to whether or not Lion should be hiding scroll bars.
作为一个 mac 用户，我不会参与关于 Lion 是否应该隐藏滚动条的哲学讨论。
As for forcing the scroll bars to appear in webpage elements, simply setting CSS's overflow: scrolldoes 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.
至于强制滚动条出现在网页元素中，只需设置 CSS 即可overflow: 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: scrollor overflow-x: scrollrespectively, instead of overflow: scroll. This works in all modern browsers, though not in IE8 and less.
如果您只希望它垂直或水平滚动，并且不显示其他维度的滚动条，则可以分别使用overflow-y: scroll或overflow-x: scroll代替overflow: scroll。这适用于所有现代浏览器，但不适用于 IE8 及更低版本。
