http://www.felissimo.info/toys/
※音がでる

このサイトのページ下部にスクロールする部分がある。
そこのスクロールデザインがなんとも良い感じ。
アクセントカラーの赤色スクロールバーがサイトの雰囲気をうまく保っていると思う。

このスクロールバーはjQueryで設置されており、IEでも表示されている。
素晴らしい。
ということで今回はこのスクロールバーに関することを走り書きだが
メモっておこうと思う。


jQueryは[ jScrollPane ]を使用しているようだ。

■デモサイト
http://www.kelvinluck.com/assets/jquery/jScrollPane/basic.html

関連スクリプトとcss

demoStyles.css
jScrollPane.css
http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js
jquery.mousewheel.js
jScrollPane.js

上記のうちカスタマイズしたのは   
jScrollPane.js
demoStyles.css

jScrollPane.js はスクロールの基本情報
demoStyles.css はデモページ内のスクロールのデザイン関連

■jScrollPane.js
640行目ぐらいにある [ dragMinHeight ]がスクロールバーの高さを調節できる。
※この他にスクロールスピードや、スクロールバーの横幅などを変更できる。

■demoStyles.css
jScrollPaneTrack スクロールバーのバックグラウンド
jScrollPaneDrag スクロールバーのスクロールする部分

上記デザインを変更する場合は、スクロールさせる大枠にオリジナルの
クラスもしくはIDを振り、そこから継承する

例：html）
<div class="holder original">
<div id="pane1" class="scroll-pane">
<p>コンテンツ内容文章掲載位置</p>
</div>
</div>

例：css）
スクロールバー
.original .jScrollPaneTrack {background: #ddd;}

スクロールする部分
.original .jScrollPaneDrag {background: #EDEDED url(type2.gif) no-repeat 0 4px; width:85px;}

originalの中に含まれる jScrollPaneTrack , jScrollPaneDrag に対してスタイルを適用する。

ざっくりだがこんな感じだ。
出来るだけ積極的に使用して、バリエーションと扱いどころをつかみたい。