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

Question

我有很多溢出的div用于在小空间中显示大量内容(如长列表等).赋予div的CSS规则overflow: auto;总是像魅力一样,给用户滚动条以指示更多内容可用.

这有点被抛出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,那是因为他们喜欢这样.如果他们使用它并且不喜欢新的滚动条,他们只会在"系统偏好设置"中更改它.