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

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

Related Article

1 Comments & Tracbacks

Leave a Comment

Emailは公開されません。*は必須項目です。


*


Categorys

Tags

CSS3 ダッシュボード ヘッダー トラブル コードサンプル スライドショー コンテンツ 素材 jQueryプラグイン Facebook php 引っ越し お知らせ JavaScript CSS カテゴリー Shareボタン IE 投稿タイプ seo Photoshop HTML5 レスポンシブ サイドバー ナビゲーション タクソノミー WPセキュリティ Git カスタムメニュー Macアプリ PHPリファレンス SVG query_posts API WP使い方 iTunes データベース コメント function RSS 条件分岐 get_posts() スマートフォン Sass/Compass マルチサイト機能