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

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

使用方法 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と同ディレクトリにアップしてください。

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

sponsors

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

記事作成:
記事URL:

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