k8o

はじめに

Baseline 2024でscrollbar-widthがサポートされて、スクロールバーの大きさを制御する方法が標準化されました。 しかし、スクロールバーの色を変更する方法は依然としてブラウザごとに異なっており悩みの種でした。

Safari 26.2のリリースによって、scrollbar-colorプロパティが主要ブラウザすべてで利用可能になりBaseline 2025に加わりました。 これにより、スクロールバーのトラックとつまみの色を標準的な方法でカスタマイズできるようになりました。

scrollbar-colorプロパティ

scrollbar-colorプロパティを使うと、シンプルにスクロールバーの色を指定できます。

/* デフォルトと同じ */
.container {
  scrollbar-color: auto;
}

.container {
  scrollbar-color: #6366f1 #e2e8f0;
}

/* デフォルトのscrollbarの色を変更 */
:root {
  scrollbar-color: var(--color-primary-fg) var(--color-primary-bg);
}

最初の値がつまみの色、2番目の値がトラックの色です。

スクロールバーの色を変更する際は、アクセシビリティを考慮してつまみとトラックで十分なコントラストを確保しましょう。

おわりに

scrollbar-colorプロパティを紹介しました。

従来の方法では、::-webkit-scrollbar擬似要素などを利用した、ブラウザごとに異なる実装が必要でした。 scrollbar-colorプロパティにより、標準化されたシンプルな記述でスクロールバーをスタイリングできるようになりました。

ダークモード対応やブランドカラーに合わせたデザインを実現するために活用してみてください。