以前jQueryプラグインを使ってスクロールバーをカスタマイズする方法を書きましたが、2010年9月に書いただけに情報も古かったので、紹介したjScrollPaneのバージョンアップ版に加えてjScrollbarとfleXcrollの2種類のカスタムスクロールバーのプラグインも合わせて比較してみました。タイトルにjQueryプラグインと書きましたがfleXcrollだけは単体で動作するのでjQueryは必要ありません。
ちなみにjQuery本体のバージョンは1.5.2を使ってます。
一先ず一番問題となるIEに対応しているかチェックしてみましたがどれもIE7どころかIE6にも対応してました。素晴らしい！以下にそれぞれのスクロールバーの特徴を上げておきました。
jScrollPane
・jQuery以外にjquery.mousewheel.jsが必要。
・好きなIDやクラス名に対して設定可能。
・iOSのSafariにも対応。
jScrollbar
・jQuery以外にjquery.ui.js、jquery.mousewheel.jsが必要。
・スクロールスピードに合わせて端まで到達時にバーが減衰する。
・マウスホイール対応、スクロール量を簡単に変更できる。
・iOSのSafariには未対応。
・カスタマイズが他二つに比べてやりにくい。
・横スクロールに未対応
fleXcroll
・jQueryなしで単体で動作する。
・一番軽量でカスタマイズも容易。
・iOSのSafariにも対応。
・非商用利用のみ無料。
一番扱いやすくて軽くていいなと思ったのはfleXcrollでした。
が、商用利用する場合はライセンスが必要になるため個人サイト対象というのがネック。
流石にお金を払うほどjScrollPaneとの差があるという訳でもないので、個人利用ならfleXcroll、商用利用ならjScrollPaneって感じかなと。とはいえ他のスクリプトとの互換性などもあるかと思うので各環境で検証してみた方がいいかと思います。
fleXcrollについては以下のサイトが和訳されていて分かりやすいです。
fleXcroll – tech.ludicmind.net
jScrollbarは完全にバーにモーションをつけたい人用ですね。
重さやカスタマイズ性など色々な面でちょっと劣ってる感じがしました。jQuery.uiとmousewheelも使うあたりやはり重くなりますね。
ちなみにKARA-FULLのトップページの新着情報にjScrollPaneとfleXcrollを導入して比較してみたところ、fleXcrollの方が0.1sほどの早く表示されました。（jScrollbarは導入してみましたがiPhone対応されてなかったので速攻外しました（笑）
今上がってるのは新着情報が少ないのでスクリプトごと外してます。
ちなみにページの表示速度を測るのに使ったのは以下のサイト。
WebWait – Benchmark Your Website
あとiOSのOpera miniにはどれも対応してませんでした。
もうOpera下げちゃっていいよ（笑
jScrollPaneをスマホ用に実装したものを上げておいたので、iPhone上でどんな感じか確認したい方は以下からドウゾー。
