Mac OS X Lion，滚动条和网站可用性 [英] Mac OS X Lion, scrollbars, and website usability

问题描述

我有很多溢出的div，它们用于在较小的空间(例如长列表等)中显示很多内容.为divs提供overflow: auto;的CSS规则始终像一个超级按钮一样，为用户提供滚动条以指示更多内容可用.

I have a number of overflowed divs that I use to display a lot of content in small space (like long lists, etc). Giving the divs the CSS rule of overflow: auto; always worked like a charm, giving the user scroll bars to indicate more content was available.

这有点被Mac OS X Lion抛弃了，它(默认情况下)会隐藏滚动条，除非您正在主动滚动.在计算机上处​​理应用程序时，我喜欢它，因为我认为有很强的视觉提示，您可以可以滚动查看更多内容.关于网页元素，目前还不清楚，而且我担心我的用户不会知道还有更多可用内容(例如:输入新问题时StackOverflow的标题相似的问题"就是一个很好的例子) ).

This is kinda thrown out the window with Mac OS X Lion, which (as a default) hides the scroll bars unless you're actively scrolling. I like it when dealing with an application on my computer, because I think there are very strong visual clues that you can scroll to see more content. On webpage elements, it's a lot less clear, and I'm worried that my users won't know there's more content available (case in point: StackOverflow's "Questions with similar titles" when entering in a new question is a good example of this).

这是否是一个合理的问题，或者Lion用户会知道如果某些内容似乎被切除，则表明可能可以滚动?例如，是否有任何变通方法可以强制在Lion上运行的浏览器呈现滚动条，如果滚动条是页面中的元素(而不是页面本身)?

Is this a legitimate concern, or will Lion users know that if something appears to be cut off, it indicates that scrolling might be available? Are there any workarounds to, say, force browsers running on Lion to render scroll bars if it's an element on the page (and not the page itself)??

推荐答案

我不同意.是的，我了解UI/UX参数.但是，由于用户可能不知道导航是水平进行的，因此某些站点(尤其是水平"导航方法)将需要此功能.但是，已经提到了强制执行此操作的修复程序.我发现这很好用:

I disagree with this. Yes, I understand the UI/UX argument. However some sites, especially the Horizontal approach for navigation would need this as users may not know navigation goes horizontally. A fix to force it however has been mentioned. I have found this works fine:

在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>

这篇关于Mac OS X Lion，滚动条和网站可用性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！