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

我有很多溢出的div，用来在小空间中显示大量内容（如长列表等）。为div提供

overflow:auto的CSS规则总是像一个符咒一样工作，给用户滚动条来指示更多的内容可用

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

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

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

这是一次攻击。让系统来处理它。如果用户使用Lion，那是因为他们喜欢这样。如果他们使用它并且不喜欢新的滚动条，他们只会在系统首选项中更改它。
Lion会在任何可滚动元素上显示滚动条，当它进入视图时，会立即闪烁滚动条，给用户一个初始提示，告诉用户还有更多可滚动的内容。当然，用户可能会也可能不会注意到这一点。如果用户习惯了狮子式的做事方式，你的网站将不是唯一发生这种情况的地方，用户可能知道如何处理它。如果您的boxen在没有滚动条的情况下看起来“不可滚动”，您可能希望给出一个更强烈的指示，表明它们是可滚动的，例如，在框的周围有一个清晰的边框，里面有一些剪切内容。这可能是你会想做的事，不管狮子

如果你能改进你的用户界面，使滚动性更明显，那么不管用哪种方法都可以。否则，如果您的内容以一种暗示有更多内容的方式呈现，我就不会担心系统上缺少滚动条，只要用户应该习惯它

你可能想把这篇文章作为一些真正的专家意见。
我不是mac用户，我将不参与关于Lion是否应该隐藏滚动条的哲学讨论

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

如果您只希望它垂直或水平滚动，而不显示其他维度的滚动条，则可以分别使用
overflow-y:scroll
或
overflow-x:scroll
，而不是
overflow:scroll
。这适用于所有现代浏览器，但不适用于IE8及以下版本
 我不同意这一点。是的，我理解UI/UX参数。然而，一些网站，尤其是水平导航方式，需要这样做，因为用户可能不知道导航是水平的。不过，有人提到了一种强制执行的修复方法。我发现这很好：



#水平滚动条：：-webkit滚动条{
-webkit外观：无！重要；
宽度：11px！重要
}
#水平滚动条：：-webkit滚动条{
边界半径：8px！重要；
边框：2件纯白！重要；
背景色：#ccc！重要
}
#水平滚动条：：-webkit滚动条拇指{
边界半径：8px！重要；
边框：2件纯白！重要；
背景色：rgba（0,0,0,5）！重要
}
/*
//如果你想让它悬停//
#水平滚动条：-webkit滚动条：活动，
#horiz_滚动条：--webkit滚动条：悬停，
#水平滚动条：：-webkit滚动条：焦点{边框半径：8px！重要；边框：2px纯白！重要；背景色：#ccc！重要}
*/
你好
OSX Lion实际上只是在强迫解决这个问题。移动浏览器（iOS和Andriod）的用户对此抱怨已久。。。溢出技巧通常不起作用；您需要更仔细地考虑页面设计，或者超越标准浏览器行为，添加对触摸和滚动的javascript支持（例如jqTouch）

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

更不幸的是，解决方案是转到“首选项>常规>显示滚动条：”并设置为“始终”。某种程度上破坏了苹果试图与Lion建立的任何前进势头。但是，能够真正使用这该死的东西是一张通用王牌。
我只是在处理同样的问题。这是我找到的修复方法。它使滚动条始终与Safari一起出现在我测试过的Mac Air和iPad上。当然，这只是在有更多内容可看的时候。当所有的内容都显示出来时就不是了

::-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);
}

有趣的问题，我自己也在想。我也有同样的想法，它们是一个很好的指示器，可以滚动。FWIW，当你打开一个页面时，滚动条确实会出现，然后消失……你确定Lion在这种情况下不会显示滚动条吗？我没有狮子，所以我不能测试它。问得好。iOS也不显示滚动条，我也没看到有人抱怨。以StackOverflow中的长代码段为例：您可以用两个手指滚动它们，不会出现任何条。@Gerben：看起来是这样的：注意，对于标题类似的文章，框中没有滚动条
::-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);
}