43

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

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

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

4

6 回答 6

12

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

在 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>
于 2012-02-14T10:55:18.820 回答
7

如果它是页面上的一个元素，是否有任何解决方法可以强制在 Lion 上运行的浏览器呈现滚动条

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

于 2011-07-25T15:47:36.167 回答
0

我只是在处理同样的问题。这是我找到的修复程序。它使滚动条始终与我测试过的 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);
}
于 2013-04-10T18:12:31.023 回答
0

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

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

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

于 2012-03-09T14:46:01.480 回答
0

Lion 确实通过在任何可滚动元素上闪烁滚动条来解决这一问题，当它进入视图时，它会立即向用户提供一个初始提示，即还有更多内容可以滚动。当然，用户可能会或可能不会注意到这一点。如果用户习惯了 Lion 的做事方式，那么您的网站将不会是唯一发生这种情况的地方，并且用户可能知道如何处理它。如果您的boxen 在没有滚动条的情况下看起来“不可滚动”，您可能希望更强烈地表明它们是可滚动的，例如通过在盒子周围设置清晰的边框，并在其中包含一些截断的内容。这可能是你想做的事，不管 Lion 是什么。

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

你可能想把它带到https://ux.stackexchange.com/以获得一些真正的专家意见。

于 2011-08-18T10:10:47.347 回答
-2

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

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

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

于 2011-12-21T22:12:24.770 回答