無法設置webkit-scrollbar-thumb的寬度

Question

我試圖設計一個在Chrome和Safari中工作的自定義滾動條。我試過下面的CSS：

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

::-webkit-scrollbar-track { 
    background-color: rgba(100, 100, 100, .5); 
    width: 15px; 
} 

::-webkit-scrollbar-thumb { 
    background-color: #818B99; 
    border-radius: 9px; 
    width: 9px; 
} 

但是在-webkit-scrollbar-thumb的width被忽略。如上所述，我希望拇指比賽道更薄。

看起來我可以通過在3px的-webkit-scrollbar-thumb上設置一個邊框來使其具有與軌道相同的顏色的邊框，但是這隻適用於不透明的背景顏色，並且我需要它以透明顏色工作軌道如上。

例的jsfiddle：http://jsfiddle.net/L6Uzu/1/

Answer 1

你是正確的WebKit忽略了滾動條拇指寬度聲明。它也在賽道上忽略它。

使用border的問題在於它在拇指內繪製邊框，所以如果您只是製作顏色transparent，它將不起作用。

解決方案是更改背景所在的位置。如上所述，默認情況下，背景在邊框下方延伸。您可以使用background-clip屬性來更改此屬性，以便它只擴展到填充框的邊緣。然後你只需要做出一個3px的透明邊框，然後鮑勃是你的叔叔：

::-webkit-scrollbar-thumb { 
    background-color: #818B99; 
    border: 3px solid transparent; 
    border-radius: 9px; 
    background-clip: content-box; 
} 

見http://jsfiddle.net/L6Uzu/3/

這正常工作在Chrome，但作爲先進的無邊框，半徑實現Safari瀏覽器所沒有的，所以圓角不可見。