[mootools]slideBox ver1.0をマウスホイールに対応させる

スクロールバーをカスタマイズ出来るmootools依存のライブラリslideBoxを、マウスホイールでも動くよう適当に変更してみた。
デフォルトだと矢印のクリックでスクロールするんだけど、
基本的なスクロール量は表示エリアの高さ（class-wrapper）と同じだから、マウスホイールで微調整したくなる場合もある。

使い方はファイル落とせば分かると思うので省略。

オプションは次の通り

options: {
	className:'slide',			// スライドするエリアのクラス名
	prevArrow:'-previous',		//前にスライドする矢印の接尾語
	nextArrow:'-next',		// 後にスライドする矢印の接尾語
	removeArrows:true,		//先頭と最後にスクロールしたとき矢印消すかどうか
	fadeArrows:false,			// 矢印にフェードエフェクトつけるかどうか
	startOpacity:0.5,			//フェードエフェクトがスタートした時の矢印の透明度
	endOpacity:1,			//フェードエフェクトが終わった時の矢印の透明度
	mouseoverBox:true,		//スライダー内にあるULとLI要素にクラスを追加するかどうか
	startClass:'normal',		// マウスアウト時に追加するクラス名
	endClass:'over',			//マウスエンター時に追加するクラス名
	speed:5,				//スクロールスピード（10:fast 1:slow）
	transition:Fx.Transitions.Quart.easeOut //スクロールのトランジション効果
},

カスタマイズ部分のソースのみ掲載してます。

※おかしな動作するかもしれません。のでご利用は自己責任で

ソース開いたら、適当な名前のメソッドをinitialize内に追加する

this.mouseEvent(element);

名前と同じメソッドを追加する。

mouseEvent: function(element){	
		this.height = this.slider.getSize().y;		
		this.slideeFx = new Fx.Tween(this.slider,{
			duration:(1*100),
			transition:Fx.Transitions.linear,
			wait:false,
			speed:1,
			onComplete:function(){
				this.active = false;
				if(this.options.removeArrows) this.setArrows();
			}.bind(this)
		});
		this.wrapper.addEvent('mousewheel', function(e){
				e.stop();
				if (e.wheel < 0)　this.mousewDown();
				else　this.mousewUp();
		}.bind(this));
	},
&#91;/js&#93;
duration、transition、speedは設定無視の固定値でおｋだと思う。勿論変更してもいい。


マウスイベント発生時に呼び出されるスクロールのメソッドを追加する。既存スクロールコピペして改変
&#91;js&#93;
mousewDown: function(){		
		this.now = this.slider.getStyle('top').toInt();		
		this.last = 0-(((this.height/this.wrapperH)-1)*this.wrapperH);
		if(this.now > this.last) {
			this.active = true;
			this.slideeFx.start('top',(this.slider.getStyle('top').toInt()-100)+'px');
		}
	},
	mousewUp: function() {
		this.now = this.slider.getStyle('top').toInt();
		this.last = 0-(((this.height/this.wrapperH)-1)*this.wrapperH);		
		if(this.now < 0) {
			this.active = true;
			if(this.now==0){
				return false;
			}else if((this.now+100) > 0){
				var num = ""+this.now;
				num =num.replace("-","");
				this.slideeFx.start('top',(this.now+eval(num))+'px');
			}else{
				this.slideeFx.start('top',(this.now+100)+'px');
			}
			
		}
	},

下方向の処理は面倒でやってない

スクロール処理はCSSのtop値の操作で動かしてるんだけども、ホイール追加すると上方向に動かした時0よりも大きい値になってしまう事があるので、
「現時点のtopの値＋スクロールの固定値＞0」で判定してtrueなら
現時点のtopの値（負数）から無理矢理マイナス外してstart()にセットする。
-16→16みたいにさくっと数値変換する方法ないのかなー

マウスホイールでスクロールする幅の値はお好みで。