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

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

サイトのキャプチャ

Scrolite

Scroliteのデモ

デモのキャプチャ

デモページ

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

デモのキャプチャ

デモページ:div要素

デモのキャプチャ

デモページ:img要素

デモのキャプチャ

デモページ: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
ホイール時の移動量

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

top of page

©2017 coliss