ブラウザのスクロールバーをデザインする「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; }
5 実行結果
デフォではiOSみたいなスクロールバーが出ます.こうなります.
しかもCSSで中の文字が大きくなっても,新しい要素を追加しても,自動的にスクロール範囲が大きくなり,スクロールバーが小さくなってくれます(要素を追加するときは,Demoのすぐ下にあるdivの中に追加するようにしてください).バーのデザインのカスタムはperfect-scrollbar.cssを変更すれば可能です.
スクロールバーを画像にしてみた
デフォルトのダサいスクロールバーは作成したウェブアプリの世界観を容赦なくぶち壊しますし,この「perfect-scrollbar」はとても簡単に使えるので,積極的に使ってみてはいかがでしょう.