macos - Mac OS X Lion、滚动条和网站可用性

Question

我有许多溢出的 div，用于在小空间中显示大量内容(例如长列表等)。为 div 指定 overflow: auto; 的 CSS 规则总是像魅力一样发挥作用，为用户提供滚动条以指示有更多内容可用。

这在 Mac OS X Lion 中有点被抛弃，它(默认情况下)会隐藏滚动条，除非您主动滚动。我喜欢在计算机上处​​理应用程序，因为我认为有非常强烈的视觉线索，您可以滚动查看更多内容。在网页元素上，它不太清楚，我担心我的用户不知道有更多可用的内容(恰当的例子:输入新问题时 StackOverflow 的“具有相似标题的问题”就是一个很好的例子)。

这是一个合理的担忧，还是 Lion 用户知道如果某些内容似乎被切断，则表明滚动可能可用？是否有任何解决方法，例如，如果滚动条是页面上的元素(而不是页面本身)，则强制在 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>