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

を私は」私は同じ問題を解決しようとしています

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