在Safari for Lion中設置滾動條顏色（OS X 10.7）

Lion中的新滾動條似乎根據body元素的背景色調整其在safari中的顏色。有沒有辦法手動設置滾動條應該是黑暗還是光線？我知道有webkit CSS選項來設計滾動條的樣式，這實際上比新的Lion滾動條更早。使用該方法的唯一問題是，該欄不再像滾動停止後淡出的真正的Lion那樣運行。雖然我認爲這可以使用CSS動畫和JavaScript來完成滾動的開始和結束，但使用真正的滾動條而不是所有的「hackery」會很好。在Safari for Lion中設置滾動條顏色（OS X 10.7）

來源

2011-07-28 Jonathan Badeen

他們真的會改變顏色嗎？我認爲他們只是半透明的，並顯示了一些背景顏色... – Yuji

是的，但他們可能是半透明的黑色或半透明的白色，這取決於身體的背景顏色。 –

唯一的方法是將淺色/深色背景設置爲html/body，以便滾動條的顏色相反，然後將所需背景添加到包裝中。

html,body { 
    height: 100%; 
    background: #000; 
} 
.wrap { 
    height: 100%; 
    background: #FFF; 
}

height: 100%;用於在有少量內容時拉伸包裝。

來源

2011-08-11 22:24:25 kizu

從Safari/Chrome上的測試看來，它只能看到body元素和body元素的背景顏色。本身並不是滾動條下面的區域。

所以當你的頁面有深色背景色時，它會自動顯示一個明亮的對比滾動條。

例如以下：

html { 
    background: white; 
} 
body { 
    width: 50%; 
    background: black; 
}

將觸發一個白色滾動條（因爲身體背景爲黑色），然而，滾動條上（html元素的右手側）浮在表面是白色的，所以它是白色的白色（非常灰色邊框）。 http://jsbin.com/oquduj/

來源

2011-10-14 00:54:33 Krinkle

Krinkle的修復程序（or similar）可能是最好的，但對於那些好奇的人來說，在Lion中設置滾動條的方式有些可能，儘管這非常煩人。這裏的基本思路是：

html { 
    overflow: auto; 
} 

body { 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    top: 0px; 
    left: 0px; 
    overflow-y: scroll; 
    overflow-x: hidden; 
} 

::-webkit-scrollbar { 
    width: 7px; 
} 

::-webkit-scrollbar-track { 
    visibility: hidden; /* doesn't seem to work */ 
} 

::-webkit-scrollbar-thumb { 
    border-radius: 4px; 
    background: rgba(0,0,0,0.5); 
} 

::-webkit-scrollbar:window-inactive { 
    visibility: hidden; 
}

這是我最接近獅子的默認黑色滾動條。這裏是我從這裏得到的全部內容：http://css-tricks.com/9130-custom-scrollbars-in-webkit/

來源

2011-10-23 16:46:23

非常感謝@EdwardLoveall對他的回答&對應的鏈接。這是我的更多iOS風格滾動條的方法（我使用的是Lion + Chrome 19）。

::-webkit-scrollbar { 
    background-color: black; 
    width: 1.25em /* 20px/16px */; 
} 

::-webkit-scrollbar-thumb { 
    background-color: rgba(255,255,255,0.33333); 
    border: 0.25em /* 4px/16px */ solid black; 
    border-radius: 1.25em /* 20px/16px */; 
}

正如他指出的那樣，你不能真正隱藏軌道，但你可以只是背景。使背景透明似乎不工作，因爲它位於HTML元素之外，所以下面只有白色。此外，很多屬性（如邊距，填充，不透明度等）似乎都不起作用，但您可以添加與背景相同顏色的厚邊框，以便拇指有一點空間可以呼吸。

來源

2012-06-12 20:08:03 mckamey

在Safari for Lion中設置滾動條顏色（OS X 10.7）

回答

相關問題