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