スクロールバーのデザインが変更できる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プラグイン php 引っ越し 素材 お知らせ JavaScript Facebook CSS カテゴリー 投稿タイプ IE HTML5 Shareボタン seo レスポンシブ Photoshop タクソノミー ナビゲーション カスタムメニュー Git Macアプリ サイドバー WPセキュリティ SVG iTunes PHPリファレンス API WP使い方 query_posts データベース get_posts() 条件分岐 コメント function RSS スマートフォン Sass/Compass さくらVPS