Newly available Safari 26.2以降が必要なため、フォールバックを考慮して使用する。
スクロール Newly available

scrollbar-color

スクロールバーのサム（つまみ）とトラック（背景）の色をCSSで指定できる。ダークモード対応やブランドカラーに合わせたスクロールバーの色変更が標準的な方法で実現できる。::-webkit-scrollbar に依存しない標準仕様である。

スクロールカスタマイズ

概要

スクロールバーのサム（つまみ）とトラック（背景）の色をCSSで指定できる。ダークモード対応やブランドカラーに合わせたスクロールバーの色変更が標準的な方法で実現できる。::-webkit-scrollbar に依存しない標準仕様である。

対応ブラウザ

デスクトップ

Chrome 121+
Edge 121+
Safari 26.2+
Firefox 64+

モバイル

Chrome Android 121+
Safari iOS 26.2+
Firefox Android 64+

基本構文

CSS 
/* サム色とトラック色を指定 */
.dark-theme {
  scrollbar-color: #6b7280 #1f2937;
}

/* auto でブラウザデフォルト */
.default-scroll {
  scrollbar-color: auto;
}

実務での使いどころ

  • ダークモード対応

    ダークテーマ時にスクロールバーの色もダークに合わせて統一感のあるUIを実現する。

注意点

  • Safari 26.2未満では無効。段階的強化として利用する。
  • 指定できるのはサムとトラックの2色のみ。細かなスタイリングには ::-webkit-scrollbar が必要だが非標準。

アクセシビリティ

  • サムとトラックのコントラスト比を十分に確保し、スクロールバーが視認できるようにする。

参考リンク