[mootools]　スクロールバーを画像でカスタマイズする

スクロールバーを画像で作ることが出来るMootools Powered Scrollbarというcoolな関数をちょっと拡張してみた話。

このオリジナルの関数ちょっとクセがありまして

<div id="wrapper">
<div id="scrollarea" style="height:1000px">dummy contents</div>
<div id="scrollbar"><div id="knob"></div></div>
</div>

上記のようにスクロールさせる要素とスクロールバーを兄弟にした場合、contentに#wrapperを指定しないとスクロールされません。
これで#wrapperにposition:relaviteしてあるとスクロールバーまで一緒にスクロールしてしまうわけです。

次のような入れ子のソースで、#wrapperの中身の#scrollareaをスクロールさせたいとした場合

<div id="wrapper">
<div id="scrollarea" style="height:1000px">dummy contents</div>
</div>

スクロールする要素包んでスクロールバーを作れば何も考えずに済む 😀

<div id="wrapper">
<div class="scroll-wrapper">
<div id="scrollarea" style="height:1000px">dummy contents</div>
</div>
<div id="scrollbar"><div id="knob"></div></div>
</div>

ので、そういうもの作ってみたというわけです（自分用に）
空要素作らなくて済むし一石二鳥かなぁと。

ViewDemo »

Usage

mootools1.2以上のcoreファイルとmoreプラグインのSliderが必要。

domready

window.addEvent('domready', function(){
	new mooCustomScrollbar($("content"),$("main"));
});

上記は#contentがスクロールさせる要素で、overflow値を持つ親要素として#mainを指定している例です。

new mooCustomScrollbar(slideable, wrap, [{options}]);

要素指定は必須。

• slideable: “” [object]
  スクロールさせる要素。ＩＤでの指定が望ましい。
• wrap: “” [object]
  高さや横幅の指定があり、overflow値(hidden)を持つ親要素。上記slideableとwrapの間にラッパー要素が入る形になります。

Optionは次の通り。

• mode: “vertical” [vertical|horizontal]
  vertical＝縦スクロール、horizontal=横スクロール。スクロールバーなのでデフォルトは縦です。
• wheel: “false” [true|false]
  trueにすると縦横両方使うときに衝突しなくなります。
• id:“scrollbar” [string]
  スクロールバーのDIV要素につけるID

ソースは次のようになります。

<div id="wrap"> 
	<div class="scroll-wrapper">
		<div id="slideable"></div>
	</div>
		<div id="scrollbar" class="scrollbar"><div class="scroll-knob"></div></div>
</div>

.scroll-wrapperと#scrollbarが作成される要素です。

.scroll-knobはマウスクリック時に”down”というクラスが追加されるので、
CSSでクリック時の画像を変更する事が出来ます。

“mooCustomScrollbar” をダウンロード

moocustomscrollbar.zip – 1467 回のダウンロード – 31.11 KB