: サイト構築 -JavaScript

[JS]簡単に設置できる超軽量のコンテンツスクローラーのスクリプト -TinyScroller

divで配置したパネルをスクロールできるようにする超軽量のスクリプトをleigeberから紹介します。

TinyScroller JavaScript Scrollable Div – 1.7KB
demo

スクリプトの容量は約1.7KB（圧縮時）で、対応ブラウザはIE6/7/8, Fx, Op, Safari, Chromeとなっています。

設置も簡単で、パネルのdiv要素と同列に下記のスクロールバーとなるdiv要素を配置します。

<div id="scrollbar">
<div id="scroller" class="scroller"></div>
</div>

上記の2つのdiv要素を内包するようにdivを2つ追加します。
あとは、スクリプトと外部ファイルにjsとcssを記述するだけです。
最小のコードは、下記のようになります。

<html>
<head>
<link rel="stylesheet" href="style.css" />
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div id="wrapper">
<div id="scroll">
<div id="scrollcontent">パネル</div>
<div id="scrollbar">
<div id="scroller" class="scroller"></div>
</div></div>
</div>

<script type="text/javascript"> 
TINY.scroller.init('scroll','scrollcontent','scrollbar','scroller','buttonclick');
</script>
</body>
</html>

Post on:2009年9月25日

ページの先頭へ