[JS]簡単に設置できる超軽量のコンテンツスクローラーのスクリプト -TinyScroller
Post on:2009年9月25日
sponsors
divで配置したパネルをスクロールできるようにする超軽量のスクリプトをleigeberから紹介します。
TinyScroller JavaScript Scrollable Div – 1.7KB
demo
スクリプトの容量は約1.7KB（圧縮時）で、対応ブラウザはIE6/7/8, Fx, Op, Safari, Chromeとなっています。
設置も簡単で、パネルのdiv要素と同列に下記のスクロールバーとなるdiv要素を配置します。
|
1 2 3 4 5 |
<textarea name="code" class="html" cols="60" rows="5"> <div id="scrollbar"> <div id="scroller" class="scroller"></div> </div> </textarea> |
上記の2つのdiv要素を内包するようにdivを2つ追加します。
あとは、スクリプトと外部ファイルにjsとcssを記述するだけです。
最小のコードは、下記のようになります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<textarea name="code" class="html" cols="60" rows="5"> <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> </textarea> |
sponsors
