ふわっと現れるスクロールバー
旧Twitterで設置されていた、ふわっと現れるスクロールバーを実装してみようと思います。
■サンプルはこちら
サンプル
jQueryのプラグイン[ jScrollPane ] を使用します。
※jScrollPaneのざっくりとした使用は過去の記事で書き留めておきました。
■metaに書きこむJS
http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js
jquery.mousewheel.js
jquery.jscrollpane.min.js
htmlのソース上の追加するscript
$(function(){ //スクロールをカスタマイズをしたい箇所へ追加のセレクタ $('.scroll-pane').jScrollPane(); //ページを読み込んだ時はスクロールバーを透明にする $('.jspDrag').css('opacity',0); //カスタマイズさせたい箇所を囲むボックスに対してhoverを利用して表示・非表示を切り替える $('.waku').hover(function(){ $('.jspDrag').animate({opacity:1}); },function(){ $('.jspDrag').animate({opacity:0}); }); });
ひとまずJS関連の設定はこれで完了です。
次にCSS関連を編集していきます。
※今回は縦スクロールのみを適応
今回htmlのソース上に追加したcss
body {background:#F2F2F2; font-size:13px; color:#444;} ul {list-style-type:none; margin:12px 0 0 0; padding:0;} li {list-style-type:none; margin-bottom:5px; padding:0 0 0 12px;} /* hoverの判定要素となるボックス */ .waku {width:120px; margin:20px auto;border-bottom;}
■metaに書きこむCSS
jquery.jscrollpane.css
jquery.jscrollpane.cssを編集をします。
編集箇所は3箇所
.jspVerticalBar
.jspTrack
.jspDrag
/*縦スクロールの設定*/ .jspVerticalBar { position: absolute; top: 0; right: 0; width: 8px; /* バーの横幅を狭く */ height: 100%; /*background: red; 背景色をコメント*/ } /* バーの背景 */ .jspTrack { /*background: #dde; スクロール部分の背景色をコメント*/ position: relative; } /* バー事態の設定 */ .jspDrag { background: #666; /*スクロール自体の背景色変更*/ position: relative; top: 0; left: 0; cursor: pointer; -webkit-border-radius:8px; /* CSS3 角丸を適応 */ -moz-border-radius:8px; border-radius:8px; }
最後にbody内の適応させたい箇所にclassを追加すれば完了です。
■都道府県
- 00:北海道
- 01:青森県
- 02:岩手県
~~~省略~~~