WEBデザイナーのつくるデザインって基本的にブラウザからキャプチャ取ってきたスクロールバーが使われるんですけど、グラフィックデザイナーよりの人がつくるWEBデザインってスクロールバーもご丁寧にサイトカラーに合わせた色合いになってる事があるんですよね。

けっこう昔に、スクロールバーをCSSで装飾するエントリーを書いた事がありましたけど、あれはChromeのみだったんですね。
今回はJavascriptを使って、メジャーどころなブラウザはほとんど同一の装飾を施せる「perfect-scrollbar.js」ってJavascriptのプラグインを使ったので備忘録。

perfect-scrollbar.jsの使い方

まずは、必要なファイルをダウンロード。
GitHubに用意されています。
必要なファイルは「perfect-scrollbar.css」と「perfect-scrollbar.js」になります。

必要なファイルを読み込みます。

<script src="js/perfect-scrollbar.js"></script>
<link rel="stylesheet" href="css/perfect-scrollbar.css" />

スクロールの領域を用意します。
【HTML】

<div class="scroll_box">
  <div class="inner">
    <p>テキストテキストテキストテキスト</p>
    <p>テキストテキストテキストテキスト</p>
            ・
            ・
            ・
    <p>テキストテキストテキストテキスト</p>
  </div>
</div>

通常のスクロールバーを設置するのと同じ要領でCSSを書きます。
【CSS】

.scroll_box01 {
  position: relative;
  width: 600px;
  height: 300px;
  margin-bottom: 30px;
  overflow-y: scroll;
  border: 1px solid #ccc;
}

通常と違うところは「position: relative;」を記述しているところです。
このJavascriptはスクロールバーは「position:absolute」で配置されているので、基準点がないと、全然違う場所にスクロールバーが移動してしまいます。

Javascriptも記述します。
【JavaScript】

var ps = new PerfectScrollbar('.scroll_box');

あとは、バーの色や背景の色を適正調整してあげればOKです。
【CSS例】

.ps__thumb-y {
  background-color: #fd284c;
}
.ps--active-x > .ps__rail-x,
.ps--active-y > .ps__rail-y {
    background-color: #ffdce2;
}

※IE11やedgeでもキチンとデザイン通りの表示が可能でした。
※個人的にはホバーの動きがいらなかったので、DEMOで取り去っています。
※「background-color」だけでなく「background-image」もいけるっぽいので、background画像も反映可能です。

DEMO

けっこう色んなデザインで遊べそうですね。

今回の軽い愚痴

今回のエントリーはIllustratorでのデータ入稿からのコーディング作業時の備忘録ですが、おそらくデザイナーさんはグラフィックよりの人だと思うんですね。
グラフィックデザイナーよりの人ってIllustratorでWEBデザインを上げてくる人多いんですけど、とりあえずこれだけは言いたい。
※Illustrator使うのは全然いいんですよ。レイアウト組むならPhotshopより全然上なのは知ってます。

• カラーモードをCMYKであげてこないでください
• 単位をmmでつくらないでちょうだい
• 基本文章をモリサワ系のフォントを使わないでもらえます？
  （使うならモリサワのプランを分けてちょうだい）
• とりあえず、アウトラインビューじゃなくて、ピクセルビューで作業してごらん
• モニターのメイン幅を紙感覚でレイアウトしないでもらえます？

今回は以上です。