2012-09-13 110 views
1

在Chrome或獅子山和山獅的Safari中測試this JS Fiddle在山獅的CSS溢出自動:沒有出現滾動條

應該顯示的是一個滾動的框。一旦開始滾動,欄會出現,當你停止滾動時會再次消失。在獅子和山獅,它沒有。任何人都知道修復顯示滾動條?

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; 
}​ 
+0

這裏沒有山獅來測試,但也許試試這個...... overflow-y:scroll; overflow-x:hidden; –

+0

對不起,@BillyMoat,但沒有去。 –

+0

標題有誤導性... jsFiddle不能像Tiger 4下的Safari所描述的那樣工作。這整個事情應該專注於瀏覽器/版本而不是操作系統。 – Sparky

回答

-5

似乎爲我工作的Linux Mint的,怎麼樣想:

overflow:scroll;
+0

*在此測試Chrome或Safari Lion上的Safari ** - Linux Mint與此有關? –

+0

@ZoltanToth是正確的,這隻與我的理解中的Mountain Lion Safari/Chrome相關。 –

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/

+0

對不起,但這不是我所需要的。我不希望JavaScript可以做CSS所需的JavaScript。不過,謝謝你的幫助。 –

+0

我認爲這是在系統首選項 - >常規,然後顯示滾動條 - >滾動時在山獅的設置。我不確定。它應該認識到溢出:hidde;或者在默認設置下滾動。 – Pullapooh

+0

是的。這是默認設置。但它似乎不適用於設置爲溢出的塊:auto。適用於頁面滾動條,而不是具有溢出的塊:auto。 –

3

這個問題在以前的海報 「真實」 顯示,在一個真正的區別出現在蘋果的Mountain Lion操作系統中。

但是滾動行爲仍然有效,在其他示例中,我在互聯網上以及開始帖子的「測試此鏈接」中看到。

問題是山獅的默認用戶設置導致滾動條被隱藏,因此用戶看不到它們。默認的「自然」滾輪或軌跡板(魔術墊)方向與舊系統或PC相反。這兩個方面導致混亂。

使用默認設置時,如果鼠標箭頭位於塊之上(即使滾動條不存在),滾動區域將滾動,並且如果朝正確的方向移動,則會出現滾動區域。默認的「自然」(Apple稱之爲)方向是滾輪或軌跡板以「自然」方向移動物體本身(而不是窗口在物體上移動)。 Mac上有一個設置可以反轉這一點,但這會讓Mac的方向與Apple觸控平板電腦的方向相反。

真正的問題是由於隱藏滾動條而導致用戶混淆,因此如果鼠標光標結束,他們沒有意識到它們可以用滾輪移動該區域。此外,用戶必須具有軌道板或滾輪才能使其工作,但大多數人甚至需要導航Mountain Lion操作系統本身。

用戶可以將個人常規設置中的Mac設置更改爲「顯示滾動條:始終」。但是這對CSS或網站開發人員幫助不大。

我建議我們向蘋果抱怨這件事。主要的替代方法就是不使用網站窗口中的可滾動區域的特徵。