有沒有辦法在webkit瀏覽器中創建透明的自定義滾動條軌道？

Question

我正在嘗試在我正在設計的設計中出現在DIV上的滾動條樣式。它只是webkit，所以我可以用CSS而不是插件的方式來獲得。

不幸的是我遇到了一個重大問題。該設計要求滾動條以透明效果重疊內容，就像OS X Mountain Lion/iOS一樣。

當自定義樣式應用於滾動條，但它的大小調整內容以適應滾動條。我已經設法調整內容的大小，以便在檢查器中它現在顯示在滾動條下，但我似乎無法使滾動條軌道透明。

我試圖將這些到兩個:: - WebKit的滾動條和:: - WebKit的滾動條軌道區域：

• 背景：透明
• 透明背景色的RGBA
• 具有透明度的背景圖像

沒有任何效果。在我放棄並嘗試JavaScript自定義滾動條解決方案之前，我想我會看看是否有其他人有答案。

* { 
 
    list-style:none; 
 
    margin:0; 
 
    padding:0; 
 
} 
 
body { 
 
    padding:20px; 
 
} 
 
#content { 
 
    background:#333; 
 
    height:400px; 
 
    padding:1px; 
 
    width:398px; 
 
} 
 
#content li { 
 
    background:#666; 
 
    height:100px; 
 
    margin-bottom:10px; 
 
    width:400px; 
 
} 
 
.scrollable-content { 
 
    overflow-x:hidden; 
 
    overflow-y:scroll; 
 
} 
 
.scrollable-content::-webkit-scrollbar { 
 
    background:transparent; 
 
    width:30px; 
 
} 
 
.scrollable-content::-webkit-scrollbar-track { 
 
    background:transparent; 
 
} 
 
.scrollable-content::-webkit-scrollbar-thumb { 
 
    background:#999; 
 
}

<ol class="scrollable-content" id="content"> 
 
    <li></li> 
 
    <li></li> 
 
    <li></li> 
 
    <li></li> 
 
    <li></li> 
 
    <li></li> 
 
</ol>

我檢查這些已：

webkit css scrollbar styling

How to prevent a webkit-scrollbar from pushing over the contents of a div?

CSS: Possible to "push" Webkit scrollbars into content?

Answer 1

我已更新您的小提琴例子 - >http://jsfiddle.net/F9p7S/

試試這個辦法：

.scrollable-content::-webkit-scrollbar * { 
    background:transparent; 
} 
.scrollable-content::-webkit-scrollbar-thumb { 
    background:#999 !important; 
}