スクロールバーのデザインが変更できるjQueryプラグイン-jScrollPane

スクロールバーのデザインが簡単に変更できます、ブラウザのスクロールバーがサイトのデザインになじまない時等によいですね。
マウスのスクロールにも対応しています。パラメータを指定したり、スタイルシートを変更することで、垂直スクロールや横スクロールや色などデザインを変更できます。

配布先と使い方

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
こちらもスクロールバーをかなりカスタマイズできそうです。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です