webkit-scrollbar-thumbの幅を設定できません

Question

ChromeとSafariで動作するカスタムスクロールバーのスタイルを設定しようとしています。 -webkit-scrollbar-thumb上widthは無視されているが

::-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; 
} 

：私は、次のCSSを試してみました。上記のように、親指をトラックよりも薄くしたいと思います。

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; 
} 

これはChromeで正しく動作しますが、そう、国境半径実装を進めたとしてSafariが持っていないhttp://jsfiddle.net/L6Uzu/3/

を参照してください。丸い角は見えません。