更新日: 2015年3月9日
HTML & CSS

CSSでスクロールバーをデザイン(WebKitブラウザ)

-webkit-scrollbar-*** のCSSスタイルを使って、スクロールバーをカスタマイズする例です。-webkit- のベンダープレフィックス付きによるカスタマイズなので、Google Chrome や Safari などレンダリングエンジンが WebKit なブラウザでのみ動作します。

【お知らせ】英単語を画像イメージで楽に暗記できる辞書サイトを作りました。英語学習中の方は、ぜひご利用ください！

画像付き英語辞書 Imagict | 英単語をイメージで暗記
【開発記録】
英単語を画像イメージで暗記できる英語辞書サービスを作って公開しました

CSSカスタマイズしたスクロールバーの例

textarea のスクロールバーをカスタマイズしてみました。まずはノーマルのもの。

ノーマル
Screen Shot 2015-03-09 at 22.35.19
HTMLソースは以下。

<textarea id="normal-id" name="normal-ta" rows="5" cols="30">
あいうえお
かきくけこ
さしすせそ
たちつてと
なにぬねの
はひふへほ
まみむめも
</textarea>

あいうえお

かきくけこ

さしすせそ

たちつてと

なにぬねの

はひふへほ

まみむめも

</textarea>

CSS でカスタマイズしたスクロールバー
Screen Shot 2015-03-09 at 22.35.28
HTMLソースは以下。

<textarea id="decorated-id" name="decorated-ta" rows="5" cols="30">
あいうえお
かきくけこ
さしすせそ
たちつてと
なにぬねの
はひふへほ
まみむめも
</textarea>

あいうえお

かきくけこ

さしすせそ

たちつてと

なにぬねの

はひふへほ

まみむめも

</textarea>

スクロールバーのデザインが変わっています。

-webkit-scrollbar-*** によるCSSカスタマイズ

以下が、カスタマイズしたほうのスクロールバーに適用したCSSです。

CSS

#decorated-id::-webkit-scrollbar {
  all:unset;
  width: 12px;
  background: transparent;
}

#decorated-id::-webkit-scrollbar-track {
  all:unset;
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.2);
  border-radius: 8px;
  background: transparent;
}

#decorated-id::-webkit-scrollbar-thumb {
  all:unset;
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
  border-radius: 8px;
  background: transparent;
}

#decorated-id::-webkit-scrollbar-thumb:hover {
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
  background: transparent;
}