読者です 読者をやめる 読者になる 読者になる

┗┐<(՞ਊ՞)>┌┛

プログラミングとミニクーパーS(F56)とバイク(セロー)と酒のブログ

ブラウザのスクロールバーをデザインする「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
スクロールバーを画像にしてみた

 デフォルトのダサいスクロールバーは作成したウェブアプリの世界観を容赦なくぶち壊しますし,この「perfect-scrollbar」はとても簡単に使えるので,積極的に使ってみてはいかがでしょう.