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

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

custom_scrollbar

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

<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]
    スクロールさせる要素。IDでの指定が望ましい。
  • 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 – 471回のダウンロード – 31 kB

Leave a Comment.