我有很多溢出的div用来在小空间内显示大量内容（如长列表等）。给这些div加上CSS规则overflow:auto;通常会很好地工作，为用户提供滚动条以指示更多内容可用。
然而，在Mac OS X Lion中默认情况下隐藏滚动条，除非你正在主动滚动。当我处理计算机上的应用程序时，我喜欢这种方法，因为我认为有非常强的视觉线索表明你可以滚动查看更多内容。对于网页元素来说，它显然不太清晰，我担心我的用户不知道还有更多的内容可用（例如：StackOverflow的“类似标题的问题”是一个很好的例子）。
这是一个合理的担忧吗？Lion用户是否知道如果某些内容被截断，说明可能存在可滚动的内容？是否有任何解决方案，例如强制在运行于Lion上的浏览器中为页面元素（而不是页面本身）渲染滚动条？
我不同意这个观点。是的，我理解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>
OS X Lion实际上是在强制问题。移动浏览器（包括iOS和Andriod）的用户已经抱怨这个问题很久了...... 溢出技巧通常不起作用；您需要更加深入地思考页面设计或者超越标准浏览器行为，为触摸和滚动添加JavaScript支持（例如jqTouch）。
不幸的是，Lion的滚动条行为不仅影响网站使用。例如，它让我连接大尺寸显示器的VNC会话变得非常烦人（我需要调整VNC窗口大小才能让Lion显示滚动条）。
更不幸的是，解决方案是进入“偏好设置 > 通用 > 显示滚动条：”并将其设置为“始终显示”。这有点抵消了苹果可能试图在Lion中建立的任何向前发展的势头。但能够真正使用它是一个通用的王牌。
Lion会在任何可滚动元素进入视图时闪烁滚动条，为用户提供初始提示，表明还有更多内容可以滚动。当然，用户可能会注意到这一点，也可能不会。如果用户习惯了Lion的做法，你的网站不是唯一发生这种情况的地方，用户可能知道如何处理它。如果你的框看起来“无法滚动”而没有滚动条，你可能需要更强烈地表明它们是可滚动的，例如，在框周围放置一个清晰的边框，并在其中放置一些截断的内容。这可能是你不管Lion都要做的事情。
如果你可以改进你的UI使滚动更加明显，那么无论如何都要做。否则，如果你的内容以一种表明还有更多内容的方式呈现，我不会担心在用户应该习惯的系统上错过滚动条。
你可能想把这个问题带到https://ux.stackexchange.com/寻求一些真正专业的意见。
::-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);
}
作为一个非Mac用户，我将不参与关于Lion是否应该隐藏滚动条的哲学讨论。
至于强制在网页元素中显示滚动条，只需设置CSS的overflow: scroll即可。这会使垂直和水平滚动条始终出现，并且当它们没有任何内容可以滚动时，这是非常明显的。
如果您只想要垂直或水平滚动，而不想让另一个维度的滚动条出现，您可以分别使用overflow-y: scroll或overflow-x: scroll，而不是overflow: scroll。这适用于所有现代浏览器，但不适用于IE8及以下版本。