[JS]テキストでも画像でもリストでもテーブルでも、長いコンテンツにスクロールバーを加えるスクリプト -Scrolite

HTMLはそのままで、さまざまな要素にオリジナルデザインのスクロールバーを加えるjQueryのプラグインを紹介します。
バーのデザインはカスタマイズできます。

Scrolite

[ad#ad-2]

• Scroliteのデモ
• Scroliteの使い方

Scroliteのデモ

デモページ

デモではページ上のさまざまな要素にスクロールバーを加えたものがあります。

デモページ：div要素

デモページ：img要素

[ad#ad-2]

デモページ：ul要素

デモページ：ol要素

デモページ：dl要素

デモページ：table要素

デモページ：p要素

Scroliteの使い方

外部ファイル

スクリプトとスクロールバー用のスタイルシートを外部ファイルとして記述します。

<script src="lib/jquery.min.js" type="text/javascript"></script>
<script src="lib/jquery.scrolite.min.js" type="text/javascript"></script>
<script src="lib/jquery.mousewheel.js" type="text/javascript"></script>
<link rel="stylesheet" href="styles/jquery.scrolite.css"></link>

HTML

HTMLは基本的にはそのままです。
jQueryのセレクタで指定するために、classを加えると便利です。

<div class="scrollable">
	コンテンツ
</div>

ul, olなどのリスト要素もclassを加えるだけです。

<ul class="scrollable">
	<li>リスト</li>
	<li>リスト</li>
</ul>

tableもclassを加えるだけ。

<table class="scrollable">
	<thead>
		....
	</thead>
</table>

JavaScript

jQueryのセレクタで指定し、幅と高さを指定し、スクリプトを実行します。

$(".scrollable").scrolite({
width:500,
height:300
});

スクリプトのオプション

オプションではコンテナの領域だけでなく、スクロールバーのデザインも簡単に変更できます。

width

スクロールエリアの幅

height

スクロールエリアの高さ

bedColor

バーのカラー

bedWidth

バーの幅

barColor

ハンドルのカラー

barWidth

ハンドルの幅

scrollSensitivity

ホイール時の移動量

スタイルシートを変更することで、デザインを自分用にすることもできます。