jScrollPaneを使った全画面スクロールバーカスタマイズ

久しぶりの技術系ネタの記事です。

Flashだとスクロールバーまで好きなように作れるけど、HTMLだと標準のスクロールバーでどうもサイトのデザインと合わなくてダサいと思う事があるかと思います。

そんな訳でリサイズに対応したウィンドウ全体のスクロールバーのカスタマイズをjQueryプラグインのjScrollPaneを使ってサンプルを作ってみました。

完成サンプルはこんな感じ。

サンプル

jScrollPane自体は結構古いスクリプトなのでjQuery1.2.6を使ってますが最新の1.4.2でも問題なく使うことが出来ます。一応ちょいちょいバージョンアップがされているようですしね。

他の多くのサイトでも載っているので、普通に設置する所までは割愛します。
以下のサイトにサンプルコードが載っているので参考にしてください。

要素のスクロール｜jQuery plugin｜Ajax｜PHP & JavaScript Room

スクロールバーをカスタマイズするjScrollPaneの使い方 | Wood-Roots.labs();

変更した箇所は以下の通り。

【css】

html{
　overflow: hidden;
　overflow-y: hidden;
}

デフォルトのスクロールバーが出ないようにcss側でスクロールバーが出ないようにします。IE6,7ではスクロールバーが出っぱなしなのでoverflow-yを指定して消します。

【html】

<script type="text/javascript">
$(function(){
　$("#pane").height(parseInt($(window).height()));
　$("#pane").width(parseInt($(window).width()));
　$('#pane').jScrollPane();
　$(window).resize(function() {
　　$('#pane').jScrollPaneRemove();
　　$("#pane").height(parseInt($(window).height()));
　　$("#pane").width(parseInt($(window).width()));
　　$('#pane').jScrollPane();
　});
});
</script>

HTML内にスクリプトを追記します。
簡単に解説するとpaneがウィンドウ全体に指定したidでリサイズ時にウィンドウサイズをpaneに適用してます。
ちなみにサンプルでは上記スクリプトを外部ファイル（Script.js）に書いてます。

もしcss編集したのにデザインが変わらないという場合は、jScrollPane.jsの最後の方にデフォルトの設定があるのでそこを編集してみてください。

もしくは追記したスクリプトのjScrollPaneを以下のように

$('#pane').jScrollPane({scrollbarWidth:10});

値を上書きすることも出来ます。

jquery.mousewheel.jsを使えばマウスホイールにも対応し、cssに指定すればスクロールバーに画像も適用できるので結構使い勝手がいいのでデフォルトのスクロールバーがイヤだ！！という方は使ってみてはどうでしょう？
それにしてもjScrollPaneがリリースされて早2年、なんで今更かというとフと思い出したとしか・・・。

jQuery本と言ったらってぐらい評判がいいようです