2011年3月3日 Category: jQuery,Webdesign Tag:

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

配布先と使い方

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

              

関連する記事

Trackback url:http://memocarilog.info/jquery/1290/trackback

Leave a comment

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

*

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Recommend

サイト構築スタイルブック

jQueryデザイン入門

10年使える逆引き手帖

最近の投稿

Mac(Lion)のメンテナンス色々
border-radius と jQueryプラグイン-jQuery.corner を使って角丸を簡単に表現する
WordPressをさくらサーバーにインストールで管理画面のみ Internal Error が出る
サイトのメタタグをnoindex,nofollowでアップロードしてしまい、検索に上がってこなくなってしまった時の対処と復帰するまでの時間
Parallelsがアップデート後起動不能になった
Facebookページの縦のスクロールバーを消すコードが変わってた
新Facebookページをデザインする際のサイズとアプリページのサイズ変更方法
普通の携帯電話との違い