このページは Cloud Translation API によって翻訳されました。

スクロールバーのスタイル設定

スクロールバーのスタイルを設定するには、scrollbar-width プロパティと scrollbar-color プロパティを使用します。

Bramus

はじめに

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

オーバーレイスクロールバーを使用する場合、デフォルトではトラックの色による影響はありません。ただし、スクロールバーにカーソルを合わせると、トラックが表示されます。

デモ: スクロールバーのスタイル設定: scrollbar-color

オペレーティングシステムのデフォルトのレンダリングを使用するには、値として auto を使用します。

`scrollbar-width` でスクロールバーのサイズを変更する

scrollbar-width プロパティを使用すると、幅の狭いスクロールバーを選択できるほか、スクロール可能性に影響を与えることなくスクロールバーを完全に非表示にすることもできます。

指定できる値は auto、thin、none です。

auto: プラットフォームが提供するデフォルトのスクロールバーの幅。
thin: プラットフォームが提供するスクロールバーのシンバリアント、またはデフォルトのプラットフォームのスクロールバーよりも細いカスタムスクロールバー。
none: スクロールバーを効果的に非表示にします。ただし、要素はスクロール可能です。

scrollbar-width の値として 16px などの <length> を使用することはできません。

.scroller {
  scrollbar-width: thin;
}

オーバーレイスクロールバーを使用する場合、スクロール可能な領域を実際にスクロールしているときにのみ、つまみが描画されます。

デモ: スクロールバーのスタイル設定: scrollbar-width

古いバージョンのブラウザをサポートする

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-* へのフォールバックを伴う scrollbar-* を使用したスクロールバーのスタイル設定

::-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. */
}

デモ: scrollbar-* を使用したスクロールバーのスタイル設定と ::-webkit-scrollbar-* へのフォールバック（カーソルを合わせたときに ::-webkit-scrollbar-* の色のみを適用する）