[css]スクロールバーデザインテンプレ

黒背景とかめったに使わんけども

css
使い所とか

css

個別に書くとだるいからそれ用のclassを使って適用させるのが楽。

スマホには適用されないっぽい。

.scrollbar::-webkit-scrollbar{
    width: 4px;
    height: 4px;
}
.scrollbar::-webkit-scrollbar-thumb{
    background: rgba(255,255,255,0.05);
    border-radius: 2px;
}
.scrollbar:hover::-webkit-scrollbar-thumb{
    background: rgba(255,255,255,0.2);
}

白背景用は薄めでこんな感じとか

.scrollbar::-webkit-scrollbar{
    width: 4px;
    height: 4px;
}
.scrollbar::-webkit-scrollbar-thumb{
    background: rgba(0,0,0,0.05);
    border-radius: 2px;
}
.scrollbar:hover::-webkit-scrollbar-thumb{
    background: rgba(0,0,0,0.2);
}

::-webkit-scrollbar-trackでスクロール部の背景を付けられるけど、なくていい感じがある。ゴツく見えるし。

transitionは使えないんでマウスオーバーでパキっと色が変わる。

使い所とか

通常時はうっっっっすらバーが見えて、スクロール領域にカーソルを合わせるとバーの色がくっきりする。透明度じゃなくてRGBで色指定してるから背景色によっては見えない可能性がある。

で、バーがめちゃめちゃ細いんでドラッグでスクロールできるやつを仕込んだほうがいいかもしんない。