ブラウザのスクロールバーをデザインする「perfect-scrollbar」

　ブラウザのスクロールバーはダサいです．まだ右端のスクロールバーなら許せるところはあるのですが，ページ内コンテンツでoverflowなどで出現するスクロールバーには怒りを覚えます．

　デフォルトのデザインがあまりにも嫌なので色々探していて，jScrollPaneやらを見てたのですが，あとで動的にdivを追加した時，スクロール範囲が自動で大きくならず，スクロールできなかったり，なんか動きモッサリしている気がして使う気になりませんでした．

　そこでもっとスマートに書けるライブラリは無いのか？と思って探して見つけたのが「perfect-scrollbar」です．

http://noraesae.github.com/perfect-scrollbar/#Demo

　デモページに飛びます．あずにゃんの画像が設置されていて，画像サイズ（正確には背景画像が設定されているdiv）の大きさに合わせてスクロールバーとスクロール可能範囲が変化します．これは素晴らしい．あずにゃんも素晴らしい．

　ただ公式ページだけではイマイチわかりにくい．そこで使用方法をまとめました．

1　ライブラリをインポートする

　まず，ライブラリを使用する前にjQueryのインポートが必要です．

<script src='http://code.jquery.com/jquery-1.8.2.min.js'></script>

　それが済んだら公式ページからライブラリをダウンロードしてインポートします．ダウンロードは先ほどのURLから行えます．
　ダウンロードしてきたファイルを解凍すると，srcというフォルダがあり，その中にjquery.mousewheel.jsとperfect-scrollbar.jsとperfect-scrollbar.cssがあります．これら全てをhtmlに読み込みます．

<link href='./perfect-scrollbar.css' rel='stylesheet' type='text/css'>
<script src='./perfect-scrollbar.with-mousewheel.min.js'></script>
<script src='./perfect-scrollbar.min.js'></script>

2　スクロールする要素を作る

id=Demoがスクロールバーを設定する要素で，その中のdivがコンテンツです．

<div id="Demo">
    <div> 
        あずにゃん
        </br>
         あずにゃん
         </br>
         あずにゃん
         </br>
         あずにゃん
         </br>
    </div>
</div>

3　CSSを設定する

Demoにスタイルを設定します．必須なのはposition: relative;とoverflow:hidden，そして要素の大きさを決めるwidthとheightです．relativeはスクロールバーの位置を決めるため，overflowはデフォルトのきちゃないスクロールバーを出現させないために設定します（ちなみに公式の説明ではposition: 'relative';となってる．シングルクォートつけるとエラーになるのだが）．

#Demo {
    position: relative;
    width:400px;
    height:400px;
    font-size:50px;
    overflow:hidden;
}

4　javascriptを書いて設定反映

　これを書くだけです．

$(function() {
    $('#Demo').perfectScrollbar(); 
});

5　実行結果

　デフォではiOSみたいなスクロールバーが出ます．こうなります．

f:id:funnelbit:20130211192656p:plain

　しかもCSSで中の文字が大きくなっても，新しい要素を追加しても，自動的にスクロール範囲が大きくなり，スクロールバーが小さくなってくれます（要素を追加するときは，Demoのすぐ下にあるdivの中に追加するようにしてください）．バーのデザインのカスタムはperfect-scrollbar.cssを変更すれば可能です．

f:id:funnelbit:20130211193508p:plain
スクロールバーを画像にしてみた