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

スポンサーリンク
【お知らせ】 英単語を画像イメージで楽に暗記できる辞書サイトを作りました。英語学習中の方は、ぜひご利用ください!
画像付き英語辞書 Imagict | 英単語をイメージで暗記
【開発記録】
英単語を画像イメージで暗記できる英語辞書サービスを作って公開しました

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

スポンサーリンク

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

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

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

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

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

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

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

CSS

ちょっと説明。

-webkit-scrollbar
スクロールバー全体のスタイル。

-webkit-scrollbar-track
両端の矢印部を除くスクロールバーのスタイル。

-webkit-scrollbar-thumb
スクロールでドラッグして動かす部分のスタイル。

-webkit-scrollbar-thumb:hover
-webkit-scrollbar-thumb 部分に hover した時のスタイル。

all:unset;
一旦、既存のスタイル値を全て削除。

あとは、なんとなく分かる感じですかね。さらに詳しくは参考ページをどうぞ。

スポンサーリンク
私は CSS がちょっと苦手なので勉強せねば...
スポンサーリンク
 
Twitterを使っていますのでフォローお願いたします!ブログの更新情報もつぶやいてます^^
(英語学習用)

Leave Your Message!