【全ブラウザ対応】perfect-scrollbar.jsでスクロールバーの色をCSSで自由に変更する。ライブラリ【全ブラウザ対応】perfect-scrollbar.jsでスクロールバーの色をCSSで自由に変更する。HOMEJavascript【全ブラウザ対応】perfect-scrollbar.jsでスクロールバーの色をCSSで自由に変更する。WEBデザイナーのつくるデザインって基本的にブラウザからキャプチャ取ってきたスクロールバーが使われるんですけど、グラフィックデザイナーよりの人がつくるWEBデザインってスクロールバーもご丁寧にサイトカラーに合わせた色合いになってる事があるんですよね。昔に、スクロールバーをCSSで装飾するエントリーを書いた事がありましたけど、あれはChromeのみだったんですね。今回はJavascriptを使って、メジャーどころなブラウザはほとんど同一の装飾を施せる「perfect-scrollbar.js」ってJavascriptのプラグインを使ったので備忘録。perfect-scrollbar.jsの使い方まずは、必要なファイルをダウンロード。GitHubに用意されています。必要なファイルは「perfect-scrollbar.css」と「perfect-scrollbar.js」になります。必要なファイルを読み込みます。/>スクロールの領域を用意します。</div></div>通常のスクロールバーを設置するのと同じ要領でCSSを書きます。relative;」を記述しているところです。このJavascriptはスクロールバーは「position:absolute」で配置されているので、基準点がないと、全然違う場所にスクロールバーが移動してしまいます。Javascriptも記述します。PerfectScrollbar('.scroll_box');あとは、バーの色や背景の色を適正調整してあげればOKです。#ffdce2;}※IE11やedgeでもキチンとデザイン通りの表示が可能でした。※個人的にはホバーの動きがいらなかったので、DEMOで取り去っています。※「background-color」だけでなく「background-image」もいけるっぽいので、background画像も反映可能です。DEMOけっこう色んなデザインで遊べそうですね。今回のエントリーはIllustratorでのデータ入稿からのコーディング作業時の備忘録ですが、おそらくデザイナーさんはグラフィックよりの人だと思うんですね。グラフィックデザイナーよりの人ってIllustratorでWEBデザインを上げてくる人多いんですけど、とりあえずこれだけは言いたい。※Illustrator使うのは全然いいんですよ。レイアウト組むならPhotshopより全然上なのは知ってます。カラーモードをCMYKであげてこないでください単位をmmでつくらないでちょうだい基本文章をモリサワ系のフォントを使わないでもらえます?(使うならモリサワのプランを分けてちょうだい)とりあえず、アウトラインビューじゃなくて、ピクセルビューで作業してごらんモニターのメイン幅を紙感覚でレイアウトしないでもらえます?今回は以上です。コメントをキャンセルメールアドレスが公開されることはありません。Memo当ブログの管理人Kc_fuji(け-し-)です。WEB制作会社に務めるサラリーマンです。このブログは、制作の覚え書きとWordpressの実験所として利用しています。PAGEWEB(K)Campus(WEB系キャンパス)は娯楽は少なめ。