方法-カスタムスクロールバー
CSSを使用してカスタムスクロールバーを作成する方法を学びます。
カスタムスクロールバー
注:カスタムスクロールバーは、FirefoxまたはEdgeの以前のバージョン79ではサポートされていません。
カスタムスクロールバーを作成する方法
Chrome、Edge、Safari、Operaは非標準の::-webkit-scrollbar
疑似要素をサポートしているため、ブラウザのスクロールバーの外観を変更できます。
次の例では、薄い(10px幅)スクロールバーを作成します。このスクロールバーには、灰色のトラック/バーの色と濃い灰色(#888)のハンドルがあります。
例
/* width */
::-webkit-scrollbar {
width: 10px;
}
/* Track */
::-webkit-scrollbar-track {
background: #f1f1f1;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: #888;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #555;
}
この例では、ボックスシャドウ付きのスクロールバーを作成します。
例
/* width */
::-webkit-scrollbar {
width: 20px;
}
/* Track */
::-webkit-scrollbar-track {
box-shadow: inset 0 0 5px
grey;
border-radius: 10px;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: red;
border-radius: 10px;
}
スクロールバーセレクター
Webkitブラウザーの場合、次の疑似要素を使用してブラウザーのスクロールバーをカスタマイズできます。
::-webkit-scrollbar
スクロールバー。::-webkit-scrollbar-button
スクロールバーのボタン(上向きおよび下向きの矢印)。::-webkit-scrollbar-thumb
ドラッグ可能なスクロールハンドル。::-webkit-scrollbar-track
スクロールバーのトラック(プログレスバー)。::-webkit-scrollbar-track-piece
ハンドルで覆われていないトラック(プログレスバー)。::-webkit-scrollbar-corner
水平スクロールバーと垂直スクロールバーの両方が出会うスクロールバーの下隅。::-webkit-resizer
一部の要素の下隅に表示されるドラッグ可能なサイズ変更ハンドル。