スクロールバーをカスタマイズ出来る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)); }, [/js] duration、transition、speedは設定無視の固定値でおkだと思う。勿論変更してもいい。 マウスイベント発生時に呼び出されるスクロールのメソッドを追加する。既存スクロールコピペして改変 [js] 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みたいにさくっと数値変換する方法ないのかなー
マウスホイールでスクロールする幅の値はお好みで。