これは簡単で楽！スクロールバーのデザインを変更するCSSを確認しながら生成できるツール -Scrollbar.app

Post on:2023年3月9日

スクロールバーのデザインを変更するCSS

スクロールバーのデザインを変更するCSSは、下記の通りです。

::-webkit-scrollbar: スクロールバー全体
::-webkit-scrollbar-thumb: ドラッグ可能なスクロールのハンドル
::-webkit-scrollbar-track: スクロールバーのトラック（進捗バー）
::-webkit-scrollbar-corner: スクロールバーの右下隅（水平バーと垂直バーの交差）

これらの疑似要素はFirefoxを除く、すべてのブラウザにサポートされています。

Firefoxの場合は、scrollbar-width, scrollbar-color, scrollbar-track-color, scrollbar-thumb-color, scrollbar-face-colorを使用します。

scrollbar-widthのサポートブラウザ

詳しくは、下記をご覧ください。

CSSでスクロールバーのデザインをCSSでカスタマイズする方法を徹底解説 -古いCSSと新しいCSSでの実装のポイント

Scrollbar.appの特徴

Scrollbar.appはスクロールバーのデザインを変更するCSSを確認しながら生成できるオンラインツールです。MITライセンスで、商用プロジェクトでも無料で利用できます。

Scrollbar.app

Scrollbar.appの使い方

使い方は、簡単です。
「Settings」でスクロールバーのデザインを変更すると、すぐにそのデザインとCSSが生成されます。

Scrollbar.app

せっかくなので、カラーやサイズを変更してみました。

カラーやサイズを変更

生成されたCSSは、下記の通りです。

body {
  --sb-track-color: #dcae8f;
  --sb-thumb-color: #ff3f00;
  --sb-size: 26px;

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

body::-webkit-scrollbar {
  width: var(--sb-size) 
}

body::-webkit-scrollbar-track {
  background: var(--sb-track-color);
  border-radius: 10px;
}

body::-webkit-scrollbar-thumb {
  background: var(--sb-thumb-color);
  border-radius: 10px;
  
  }