スクロールバーのスタイルを設定するには、scrollbar-width
プロパティと scrollbar-color
プロパティを使用します。
はじめに
Chrome バージョン 2 以降では、::-webkit-scrollbar-*
疑似要素を使用してスクロールバーのスタイルを設定できました。このアプローチは Chrome と Safari では問題なく機能しますが、CSS ワーキング グループによって標準化されたものではありませんでした。
標準化されたのは、CSS Scrollbars Styling Module Level 1 Specification の一部である scrollbar-width
プロパティと scrollbar-color
プロパティです。これらのプロパティは Chrome 121 でサポートされています。
スクロールバーの基本
スクロールバーの構造
スクロールバーは、少なくともトラックとつまみで構成されます。トラックとは、つまみを動かせる領域のことです。トラックはスクロール距離全体を表します。つまみは、スクロール可能な領域内の現在の位置を表します。スクロールすると、トラック内を移動します。多くの場合、つまみはドラッグ可能です。
ただし、スクロールバーは、つまみとトラック以外の部分も構成できます。たとえば、スクロールバーには、スクロール オフセットを増減する 1 つ以上のボタンを表示できます。スクロールバーを構成する部分は、基盤となるオペレーティング システムによって決まります。
クラシック スクロールバーとオーバーレイ スクロールバー
スクロールバーのスタイルを設定する方法を見ていく前に、2 種類のスクロールバーの違いを理解しておくことが重要です。
オーバーレイのスクロールバー
オーバーレイ スクロールバーは、その下のコンテンツの上に表示されるフローティング スクロールバーです。これらはデフォルトでは表示されず、ユーザーが実際にスクロールしている間にのみ表示されます。その下のコンテンツを表示し続けるために、通常は半透明になりますが、これはオペレーティング システムによって決定されます。また、操作中にサイズが変わることもあります。
従来のスクロールバー
従来のスクロールバーは、専用のスクロールバー ガターに配置されるスクロールバーです。スクロールバーのガターは、内側の境界線と外側のパディング エッジの間のスペースです。通常、これらのスクロールバーは不透明(透明ではない)で、隣接するコンテンツのスペースを取り除きます。
scrollbar-color
プロパティと scrollbar-width
プロパティ
scrollbar-color
でスクロールバーに色を付ける
scrollbar-color
プロパティを使用すると、スクロールバーのカラーパターンを変更できます。このプロパティには 2 つの <color>
値を指定できます。1 つ目の <color>
値でつまみの色を決定し、2 つ目の値でトラックに使用する色を指定します。
.scroller {
scrollbar-color: hotpink blue;
}
オーバーレイ スクロールバーを使用する場合、デフォルトではトラックの色による影響はありません。ただし、スクロールバーにカーソルを合わせると、トラックが表示されます。
オペレーティング システムのデフォルトのレンダリングを使用するには、値として auto
を使用します。
scrollbar-width
でスクロールバーのサイズを変更する
scrollbar-width
プロパティを使用すると、幅の狭いスクロールバーを選択できるほか、スクロール可能性に影響を与えることなくスクロールバーを完全に非表示にすることもできます。
指定できる値は auto
、thin
、none
です。
auto
: プラットフォームが提供するデフォルトのスクロールバーの幅。thin
: プラットフォームが提供するスクロールバーのシン バリアント、またはデフォルトのプラットフォームのスクロールバーよりも細いカスタム スクロールバー。none
: スクロールバーを効果的に非表示にします。ただし、要素はスクロール可能です。
scrollbar-width
の値として 16px
などの <length>
を使用することはできません。
.scroller {
scrollbar-width: thin;
}
オーバーレイ スクロールバーを使用する場合、スクロール可能な領域を実際にスクロールしているときにのみ、つまみが描画されます。
古いバージョンのブラウザをサポートする
scrollbar-color
と scrollbar-width
をサポートしていないバージョンに対応するには、新しい scrollbar-*
プロパティと ::-webkit-scrollbar-*
プロパティの両方を使用できます。
.scroller {
--scrollbar-color-thumb: hotpink;
--scrollbar-color-track: blue;
--scrollbar-width: thin;
--scrollbar-width-legacy: 10px;
}
/* Modern browsers with `scrollbar-*` support */
@supports (scrollbar-width: auto) {
.scroller {
scrollbar-color: var(--scrollbar-color-thumb) var(--scrollbar-color-track);
scrollbar-width: var(--scrollbar-width);
}
}
/* Legacy browsers with `::-webkit-scrollbar-*` support */
@supports selector(::-webkit-scrollbar) {
.scroller::-webkit-scrollbar-thumb {
background: var(--scrollbar-color-thumb);
}
.scroller::-webkit-scrollbar-track {
background: var(--scrollbar-color-track);
}
.scroller::-webkit-scrollbar {
max-width: var(--scrollbar-width-legacy);
max-height: var(--scrollbar-width-legacy);
}
}
::-webkit-scrollbar
の width
または height
を設定すると、オーバーレイ スクロールバーが常に表示され、事実上従来のスクロールバーに変わります。
スクローラーにカーソルを合わせたときにのみ色を変更するように選択できます。
.scroller::-webkit-scrollbar-thumb {
background: transparent;
}
.scroller::-webkit-scrollbar-track {
background: transparent;
}
.scroller:hover::-webkit-scrollbar-thumb {
background: var(--scrollbar-color-thumb);
}
.scroller:hover::-webkit-scrollbar-track {
background: var(--scrollbar-color-track);
}
.scroller:hover {
--fix: ; /* This custom property invalidates styles on hover, thereby enforcing a style recomputation. This is needed to work around a bug in Safari. */
}