スクロールバーのデザインが変更できるjQueryプラグイン-jScrollPane
スクロールバーのデザインが簡単に変更できます、ブラウザのスクロールバーがサイトのデザインになじまない時等によいですね。
マウスのスクロールにも対応しています。パラメータを指定したり、スタイルシートを変更することで、垂直スクロールや横スクロールや色などデザインを変更できます。
配布先と使い方
配布先の「download」の箇所より
jquery.jscrollpane.cssとjquery.jscrollpane.min.jsと、
マウスホイールの為にjquery.mousewheel.jsをダウンロードします。
jQuery本体とjquery.jscrollpane.cssとjquery.jscrollpane.min.jsとJQuery.mousewheel.jsをヘッド内で読み込みます。
<script type="text/javascript" src="js/jquery.js" ></script> <script type="text/javascript" src="js/jquery.mousewheel.js"></script> <script type="text/javascript" src="js/jScrollPane.js"></script> <link rel="stylesheet" type="text/css" href="js/jScrollPane.css" />
つづけてヘッド内に下記のコードを記入します。(配布先サイト参照)
<script type="text/javascript"> $(function() { $('#スクロールバーを付ける要素').jScrollPane(); }); </script>
jScrollPane()内にパラメータ指定することでもデザイン変更できるようです。配布先のdemoの箇所に詳細がのっています。
jScrollPane.cssでデザインをカスタマイズできます
.jScrollPane({showArrows:true});
↑showArrows:trueに指定してから
.jScrollPaneTrack 背景の部分 .jScrollPaneDrag スクロールバーの本体 a.jScrollArrowUp スクロールバーの上部 a.jScrollArrowUp:hover スクロールバーの上部ホバー時 a.jScrollArrowDown スクロールバーの下部 a.jScrollArrowDown:hover スクロールバーの下部ホバー時
使用してみていませんがスクロールのデザイン変更のプラグインは他にもありました。
jquery custom content scroller
こちらもスクロールバーをかなりカスタマイズできそうです。
1 Comments & Tracbacks