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

Question

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

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

这是一个合理的担忧，还是 Lion 用户知道如果某些内容似乎被切断，则表明滚动可能可用？是否有任何解决方法，例如，如果滚动条是页面上的元素（而不是页面本身），则强制在 Lion 上运行的浏览器渲染滚动条？

Answer 1

我不同意这一点。是的，我理解 UI/UX 的争论。然而，某些网站，尤其是水平导航方法需要这样做，因为用户可能不知道导航是水平进行的。然而，已经提到了强制它的修复。我发现这工作正常：

在 Mac Safari Chrome 等中打开我的代码（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 的做事方式，您的网站将不会是唯一发生这种情况的地方，并且用户可能知道如何处理它。如果您的盒子在没有滚动条的情况下“不可滚动”，您可能需要提供更强烈的指示，表明它们是可滚动的，例如，通过在盒子周围有一个清晰的边框，并在里面包含一些截止内容。无论狮子如何，这可能都是您想做的事情。

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

您可能需要访问 https://ux.stackexchange.com/ 获取一些真正的专家意见。

Answer 4

OS X Lion 实际上只是在强制解决这个问题。移动浏览器（iOS 和 Andriod）的用户多年来一直对此抱怨不休……溢出技巧通常不起作用；您需要更加仔细地考虑页面设计或超越标准浏览器行为并添加对触摸和滚动的 javascript 支持（例如 jqTouch）。

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

双重不幸的是，解决方案是转到“首选项>常规>显示滚动条：”并设置为“始终”。这有点抵消了苹果可能一直试图与 Lion 建立的任何前进动力。但能够真正使用该死的东西是一张通用王牌。

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 ，而不是溢出：滚动。这适用于所有现代浏览器，但不适用于 IE8 及更低版本。