スクロールバーをカスタマイズ出来るmootools依存のライブラリslideBoxを、マウスホイールでも動くよう適当に変更してみた。
デフォルトだと矢印のクリックでスクロールするんだけど、
基本的なスクロール量は表示エリアの高さ（class-wrapper）と同じだから、マウスホイールで微調整したくなる場合もある。
使い方はファイル落とせば分かると思うので省略。
オプションは次の通り
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | 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内に追加する
1 | this.mouseEvent(element); |
名前と同じメソッドを追加する。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 | 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は設定無視の固定値でおｋだと思う。勿論変更してもいい。マウスイベント発生時に呼び出されるスクロールのメソッドを追加する。既存スクロールコピペして改変[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みたいにさくっと数値変換する方法ないのかなー
マウスホイールでスクロールする幅の値はお好みで。