Mountain Lion中的CSS Overflow Auto:没有出现滚动条

时间:2012-09-13 16:04:10

标签: css scrollbar overflow osx-mountain-lion

在Lion和Mountain Lion上的Chrome或Safari中测试this JS Fiddle

应该显示的是一个滚动的框。一旦开始滚动,该栏就会出现,并在您停止滚动时再次消失。在狮子和山狮中,它没有。有人知道显示滚动条的修复程序吗?

HTML:

<div id="box">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus facilisis scelerisque aliquam. Nulla consequat justo malesuada mi imperdiet sodales. Morbi rhoncus, diam nec egestas sagittis, ipsum eros sollicitudin urna, quis ornare erat nisl scelerisque eros. Nulla eleifend posuere tempus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum in diam commodo sapien mollis cursus. Integer vitae lacus augue. Proin a velit augue. Quisque at mi augue, a sagittis metus. Aenean id bibendum nunc. Nulla quis eros odio. Sed non leo diam, et sollicitudin leo. Cras ut nibh diam, a mattis felis. Proin lectus massa, fermentum sit amet aliquet id, posuere a dui. Morbi vulputate elit elit. Proin in mi turpis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus facilisis scelerisque aliquam. Nulla consequat justo malesuada mi imperdiet sodales. Morbi rhoncus, diam nec egestas sagittis, ipsum eros sollicitudin urna, quis ornare erat nisl scelerisque eros. Nulla eleifend posuere tempus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum in diam commodo sapien mollis cursus. Integer vitae lacus augue. Proin a velit augue. Quisque at mi augue, a sagittis metus. Aenean id bibendum nunc. Nulla quis eros odio. Sed non leo diam, et sollicitudin leo. Cras ut nibh diam, a mattis felis. Proin lectus massa, fermentum sit amet aliquet id, posuere a dui. Morbi vulputate elit elit. Proin in mi turpis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus facilisis scelerisque aliquam. Nulla consequat justo malesuada mi imperdiet sodales. Morbi rhoncus, diam nec egestas sagittis, ipsum eros sollicitudin urna, quis ornare erat nisl scelerisque eros. Nulla eleifend posuere tempus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum in diam commodo sapien mollis cursus. Integer vitae lacus augue. Proin a velit augue. Quisque at mi augue, a sagittis metus. Aenean id bibendum nunc. Nulla quis eros odio. Sed non leo diam, et sollicitudin leo. Cras ut nibh diam, a mattis felis. Proin lectus massa, fermentum sit amet aliquet id, posuere a dui. Morbi vulputate elit elit. Proin in mi turpis.</p>
</div>​

CSS:

#box {        
    height: 300px;
    overflow: auto;
    margin: 10px;
}​

3 个答案:

答案 0 :(得分:3)

这个问题是“真实的”,以前的海报在Apple的Mountain Lion操作系统中显示出真正的外观差异。

但滚动行为仍然有效,我在互联网上看到的其他例子以及开幕贴的“测试此”链接。

问题是Mountain Lion中的默认用户设置会导致滚动条被隐藏,因此用户看不到它们。默认的“自然”滚轮或触控板(Magic Pad)方向与旧系统或PC相反。这两个方面导致了混乱。

使用默认设置,如果鼠标箭头在块上方(即使滚动条不存在),滚动区域将滚动,如果向正确方向移动,则会出现滚动区域。默认的“自然”(如Apple称之为)方向是滚轮或跟踪板在“自然”方向上移动对象本身(与在对象上移动的窗口相反)。 Mac上有一个设置来扭转这一局面,但这将使Mac的方向与Apple触控平板上的方向相反。

真正的问题是由于隐藏滚动条导致用户混淆,因此他们没有意识到如果鼠标光标结束,他们可以使用滚轮移动该区域。此外,用户必须有一个跟踪板或滚轮才能工作,但大多数情况下甚至需要导航Mountain Lion操作系统本身。

用户可以将个人常规设置中的Mac设置更改为“显示滚动条:始终”。但这对CSS或网站开发人员没什么帮助。

我建议我们向Apple抱怨此事。主要的替代方案是在网站的窗口中不使用可滚动区域的功能。

答案 1 :(得分:0)

这是一个jQuery插件,可以满足您的需求。

http://naeka.github.com/jquery-scrollbar/

你需要

<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="jquery-ui-1.8.16.custom.min.js"></script>
<script type="text/javascript" src="jquery.scrollbar.min.js"></script>
<script type="text/javascript" src="demo.js"></script>

使用班级<div id="page"> <div class="scrollBox"><div id="scroll1"><p class="left">

示例:http://jsfiddle.net/pullapooh/3aGDK/

答案 2 :(得分:-5)

似乎在linux上为我工作薄荷,尝试怎么样:

overflow:scroll;