jQueryプラグインにスクロールバーを実現するscrollerというものがあったので試してみた。
1.プラグインの入手
jQuery custom content scrollerから次の2つのファイルをダウンロードする。
- jquery.mCustomScrollbar.min.js
- jquery.mCustomScrollbar.css
2.HTMLへの組込み
次のように組み込む(プラグインはjQueryのリンクより後に記述するようにする)
<script type="text/javascript" src="jquery.mCustomScrollbar.concat.min.js"> <link href="jquery.mCustomScrollbar.css" rel="stylesheet" type="text/css">
3.cssの設定
- height(もしくはmax-height)が必要
- display属性がblockの要素であること
- overflow属性がautomかhiddenであること
<style type="text/css"> #content_1 { margin-left:20px; width:320px; height:500px; overflow:hidden; padding:20px; background:#333; color:#eee; } </style>
4.スクロールバーの配置
以下の様にスクロールバーを設置したい要素をセレクタに指定し、それに対してmCustomScrollbarメソッドを利用する。
<script type="text/javascript"> $(function(){ $("#content_1").mCustomScrollbar(); }); </script>
サンプル