スクロールバーの色や太さをカスタマイズする

ウェブ機能: scrollbar-color scrollbar-width

標準の CSS プロパティ scrollbar-color と scrollbar-width を使用して、スクロールバーの外観をカスタマイズできます。

  • scrollbar-color: 2 つの <color> 値を受け取ります。1 つ目はつまみ（動く部分）に適用され、2 つ目はトラック（固定された背景）に適用されます。
  • scrollbar-width: auto（デフォルト）、thin（細いバリアント）、none（スクロール機能を維持しながらスクロールバーを完全に非表示にする）を指定できます。

scrollbar-color と scrollbar-width を適用する

必須: スクロール可能なコンテナで scrollbar-color と scrollbar-width を使用します。

scrollbar-color を使用する場合は、CSS 変数を使用して、読みやすさと保守性を確保するために、つまみとトラックの色を別々にします（特にフォールバックを使用する場合）。

.scroller {
  --scrollbar-thumb: var(--color-neutral-70);
  --scrollbar-track: var(--color-neutral-90);

  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

代替戦略

scrollbar-color のフォールバックとブラウザ サポート

この機能はプログレッシブ エンハンスメントであり、必ずしもフォールバックが必要なわけではありません。

スタイル設定が重要で、ユーザーの Baseline ターゲットが「Baseline Widely Available」以前の場合は、フォールバックとして非標準の ::-webkit-scrollbar 疑似要素を含めるべきです。

以前のフォールバックを @supports not (scrollbar-color: auto) ブロックでラップして、標準プロパティと以前の WebKit セレクタの両方をネイティブにサポートするブラウザで、それらの競合を防ぎます。

カスタム プロパティを使用して色を定義している場合、それらの色は以前の WebKit セレクタに自動的にカスケードされます。重複して作成する必要はありません。

/* Legacy fallback for WebKit/Blink browsers */
@supports not (scrollbar-color: auto) {
  .scroller::-webkit-scrollbar {
    /* Must define base size in WebKit for custom colors to be visual */
    width: 12px;
    height: 12px;
  }

  .scroller::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
  }

  .scroller::-webkit-scrollbar-track {
    background: var(--scrollbar-track);
  }
}