Mac OS X Lion，滚动条和网站的可用性
我有一些溢出的div，我用它在很小的空间显示很多内容（比如长列表等）。 给div div overflow: auto;的CSS规则overflow: auto; 总是像一个魅力工作，给用户滚动条，以指示更多的内容可用。
这是用Mac OS X Lion抛出窗口，它（默认情况下）隐藏滚动条，除非你正在滚动。 在处理计算机上的应用程序时，我喜欢它，因为我觉得有非常强大的视觉线索可以滚动以查看更多内容。 在网页元素上，这是很不明显的，我担心我的用户不会知道有更多的内容可用（例如：在input新问题时，StackOverflow的“带有类似标题的问题”就是一个很好的例子）。
这是一个合理的问题，或者狮子会的用户知道，如果某些东西似乎被切断了，那么表明滚动可能是可用的？ 是否有任何解决方法，例如强制浏览器运行在狮子上呈现滚动条，如果它是页面上的元素（而不是页面本身）？
我不同意这个。 是的，我了解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>
是否有任何解决方法，例如强制在Lion上运行的浏览器呈现滚动条，如果它是页面上的元素
这是一个攻击。 让系统照顾它。 如果用户使用狮子，那是因为他们喜欢这个。 如果他们使用它，而不喜欢新的滚动条，他们只会改变在系统偏好设置。
Lion会自动处理这个问题，方法是在任何可滚动的元素上闪动一下滚动条，当它进入视图的时候，给用户一个初始提示，说明还有更多的滚动条。 当然，用户可能会也可能不会注意到这一点。 如果用户习惯了Lion的做事方式，您的网站将不会是唯一发生这种情况的用户，而且用户可能知道如何处理这个问题。 如果你的boxen 看起来 “不可滚动”而没有滚动条，那么你可能需要更强烈地指出它们是可滚动的，例如，在框中有一个清晰的边框，里面有一些截断内容。 这可能是你想要做的事情，无论狮子。
如果您可以改进您的用户界面，使滚动更明显，无论是任何方式。 否则，如果你的内容是以一种暗示的方式呈现的话，我不会担心用户应该习惯于在系统上丢失滚动条。
OS X Lion真的只是强迫这个问题。 移动浏览器的用户（包括iOS和Andriod）都已经喋喋不休了……溢出技巧一般不起作用; 你需要更加努力地思考页面devise，或者超越标准的浏览器行为，并添加对触摸和滚动的javascript支持（例如jqTouch）。
不幸的是，Lion的滚动条行为不仅影响网站。 例如，它使我的vnc会话与大显示设置非常恼人的机器（必须调整vnc窗口来说服狮子来显示我一个滚动条）。
不幸的是，解决方法是转到“首选项>常规>显示滚动条：”并设置为“始终”。 这种解除苹果可能一直试图与狮子build立的前进势头。 但能够真正使用该死的东西是一个通用的王牌。
我只是处理这个相同的问题。 这是我find的修复。 这使得滚动条总是出现在我testing过的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); }
不是一个mac用户，我会留在狮子是否应该隐藏滚动条的哲学讨论。
至于迫使滚动条出现在网页元素，简单地设置CSS的overflow: scroll的伎俩。 这使得垂直和水平滚动条总是出现，当他们没有任何东西滚动的时候，这是非常明显的。
如果您只想要纵向或横向滚动，而不显示其他维度的滚动条，则可以分别使用overflow-y: scroll或overflow-x: scroll ，而不是overflow: scroll 。 这适用于所有现代浏览器，但不在IE8及更低版本中。
