iOSライクなスクロールバーを表現できるJavaScript「NICESCROLL」

iOSみたいなスクロールバー表示があるとユーザビリティが向上されそうです。
NICESCROLLは、初期にスクロールバーを見せたのち、いったんフェードアウトさせられます。
またスマートフォンのタッチイベントにも対応しています。

sponsors

使用方法

NICESCROLLからファイル一式をダウンロードします。

<style>
#id名 {
	height: 220px;
	overflow: auto;
}
</style>
<script type="text/javascript" src="jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="jquery.nicescroll.js"></script>
<script>
    $(function() {
      $("#id名").niceScroll({
      	cursorcolor:"#CCC", //スクロールバーのカラー
      	cursoropacitymax:1, //スクロールバーの最大透過
      	boxzoom:true //ズームを表示するかどうか
    });
</script>
あとは上記IDを付与すれば完成です。

<div id="id名">
要素
</div">
※拡大用の画像はjsと同ディレクトリにアップしてください。

サンプル

test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test

Javascriptサンプルページ一覧
skuare.net

sponsors