36

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

ただし、width上の-webkit-scrollbar-thumbは無視されています。上記のように、親指をトラックよりも細くしたいと思います。

-webkit-scrollbar-thumbトラックと同じ色で 3pxの境界線を設定することで幅を偽造できるようですが、これは不透明な背景色でのみ機能し、上記のようにトラックの透明な色で機能する必要があります。

jsfiddle の例: http://jsfiddle.net/L6Uzu/1/

4

1 に答える 1

93

WebKit が scrollbar-thumb の width 宣言を無視することは正しいです。また、トラック上では無視されます。

a を使用する際の問題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 にはボーダー半径の実装が高度ではないため、丸みを帯びた角は表示されません。

于 2013-05-30T06:25:54.047 に答える