IT the Best
こちらの記事もみていただけたら嬉しいです。
今回の記事は、
この見慣れたスクロールバーのカスタマイズに関する記事です。
前置き
Firefox、IEなどでは、サポートされていません。
スクロールバーのカスタマイズで使用する疑似要素のブラウザ互換性(2019/07/04時点)
https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-scrollbarから引用
サンプルスクロールバー
<div class="scrollbar">
<p>スクロールバースクロールバー</p>
<p>スクロールバースクロールバー</p>
<p>スクロールバースクロールバー</p>
<p>スクロールバースクロールバー</p>
<p>スクロールバースクロールバー</p>
<p>スクロールバースクロールバー</p>
</div>
非表示にする
::-webkit-scrollbar
スクロールバーを非表示にするには、::-webkit-scrollbar疑似要素を使用します。
.scrollbar::-webkit-scrollbar{
display: none;
}
表示を変える
::-webkit-scrollbar
スクロールバー全体のスタイルを変更
.scrollbar::-webkit-scrollbar{
background-color: #043dff;
width: 30px;
height: 10px;
}
::-webkit-scrollbar-button
スクロールバーのボタンのスタイルを変更
.scrollbar::-webkit-scrollbar-button{
background-image: url("https://cdn.image.st-hatena.com/image/square/b91fd7fd620c07d120901a246c0d22eb4639439c/backend=imagemagick;height=500;quality=80;version=1;width=500/https%3A%2F%2Fcdn-ak.f.st-hatena.com%2Fimages%2Ffotolife%2FS%2FSurprisedblog%2F20190530%2F20190530175549.png");
background-size: cover;
}
::-webkit-scrollbar-thumb
スクロールバーのドラッグ部分のスタイルを変更
.scrollbar::-webkit-scrollbar-thumb{
background: #b5b5b5;
border-radius: 1em;
}
hoverなどを設定することで、従来のスクロールバーのようなアクションにすることもできます。
.scrollbar::-webkit-scrollbar-thumb:hover{
background: #8b8b8b;
}
.scrollbar::-webkit-scrollbar-thumb:active{
background: #555555;
}
::-webkit-scrollbar-track
スクロールバーのトラック部分のスタイルを変更
.scrollbar::-webkit-scrollbar-track{
background: orange;
}
::-webkit-scrollbar-track-piece
有効な活用方法が見つかりませんでした。
https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-scrollbar
による説明
::-webkit-scrollbar-track-piece- トラックの一部（プログレスバー）はハンドルで覆われていません。
::-webkit-scrollbar-corner
スクロールバーの角のスタイルを変更
.scrollbar::-webkit-scrollbar-corner{
background: black;
}
::-webkit-resizer
リサイズのスタイルを変更する
.scrollbar{
resize: both;
}
.scrollbar::-webkit-resizer{
border: 10px solid #b5b5b5;
border-radius: 1em;
}
