Question

我有很多溢出的div用于在小空间显示大量内容（如长列表等）。赋予div {CSS}规则overflow: auto;总是像魅力一样，给用户滚动条以指示更多内容可用。

这有点被抛出Mac OS X Lion的窗口，除非你正在积极滚动，否则（默认情况下）会隐藏滚动条。我在计算机上处理应用程序时喜欢它，因为我认为有很强的视觉线索，你可以滚动查看更多内容。在网页元素上，它不太清楚，我担心我的用户不会知道有更多内容可用（例如：在输入新问题时，StackOverflow的“具有相似标题的问题”就是一个很好的例子）。

这是一个合理的问题，或狮子会用户是否知道，如果某些内容似乎被切断，则表明滚动可能有效？是否有任何变通方法，比如强制在Lion上运行的浏览器呈现滚动条，如果它是页面上的元素（而不是页面本身）？

Answer 1

我不同意这一点。是的，我理解UI / UX参数。然而，一些站点，尤其是水平导航方法需要这样，因为用户可能不知道导航是水平的。然而，已经提到了强制它的修复方法。我发现这很好用：

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>

Answer 2

是否有任何变通方法，比如强制在Lion上运行的浏览器呈现滚动条（如果它是页面上的元素）

这是一次攻击。让系统来处理它。如果用户使用Lion，那是因为他们喜欢这样。如果他们使用它并且不喜欢新的滚动条，他们只会在“系统偏好设置”中更改它。

Answer 3

Lion通过在任何可滚动元素上闪烁滚动条的瞬间进入视图时确实处理了这个问题，为用户提供了一个初始提示，表示还有更多要滚动到的内容。当然，用户可能会或可能不会注意到这一点。如果用户习惯了Lion的做事方式，那么您的网站将不会是唯一发生这种情况的地方，用户可能知道如何处理它。如果您的boxen 看起来“不可滚动”而没有滚动条，您可能想要更强烈地指示它们是可滚动的，例如在盒子周围有一个清晰的边框，里面有一些截断内容。无论Lion如何，这都可能是您想要做的事情。

如果您可以改进UI以使滚动性更加明显，那么就这样做。否则，如果您的内容以暗示更多的方式呈现，我不会担心系统上缺少滚动条，用户应该习惯它。

您可能希望将此问题提交给https://ux.stackexchange.com/以获得一些真正的专家意见。

Answer 4

OS X Lion实际上只是强迫这个问题。移动浏览器的用户（包括iOS和Andriod）多年来一直在喋喋不休......溢出技巧一般不工作;你需要更加思考页面设计或超越标准浏览器行为，并添加javascript支持触摸和滚动（例如jqTouch）。

不幸的是，Lion的滚动条行为不仅会影响网站。例如，它使我对具有大显示设置的机器的vnc会话非常烦人（必须调整vnc窗口的大小以说服Lion向我显示滚动条）。

不幸的是，解决方案是转到“首选项＆gt;常规＆gt;显示滚动条：”并设置为“始终”。有点贬低苹果可能一直试图与狮子建立的任何前进动力。但能够真正使用该死的东西是一个通用的王牌..

Answer 5

我只是处理同样的问题。这是我找到的修复方法。它使滚动条始终显示在Mac Air和我测试的iPad上的Safari。当然，这只有在有更多内容可见时才会出现。不是在显示所有内容时。

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

Answer 6

不是mac用户，我将不参与关于Lion是否应该隐藏滚动条的哲学讨论。

至于强制滚动条出现在网页元素中，只需设置CSS overflow: scroll即可。这会将纵向和横向滚动条设置为始终显示，并且当它们没有任何要滚动的内容时非常明显。

如果您只希望它垂直或水平滚动，而不显示其他维度的滚动条，则可以分别使用overflow-y: scroll或overflow-x: scroll，而不是overflow: scroll。这适用于所有现代浏览器，但不适用于IE8及更低版本。

Mac OS X Lion，滚动条和网站可用性

6 个答案: