2012年1月30日月曜日

jquery.mousewheel.jsでのマウスホイールイベント(2012/7/25追記あり)

  • このエントリーをはてなブックマークに追加

jquery.mousewheel.jsを使ってのマウスホイールイベントの取得をやってみた。
プラグインは今現在ダウンロードが出来ない?ので、
過去に使った案件より流用。


$(window).bind("mousewheel",function(event,delta){
  switch(delta){
    case 1:
      //ホイールを上に回転させた場合
           alert("上に回転させました");
            break;
    case -1:
      //ホイールを下に回転させた場合
           alert("下に回転させました");
            break;
  }
});

こんな感じで記述すれば大丈夫!
と思ったけどホイールの回転が0となってしまい、
うまく取得出来なかった。

原因としてはjquery.mousewheel.jsだったので、
handlerをちょこっと改造。
ソースを貼りつけられないのでざくっと書くとこんな感じ↓
(52行目辺りだった)

下に追記あり


    //event = $.event.fix(orgEvent);コメントアウトして下記の行を有効に
    event = orgEvent;

これで無事にdeltaの値が±1で取得出来た。



↓↓↓↓↓追記(2012/07/25)↓↓↓↓↓↓

なんかこの記事の反響はかなりあるみたいで、中途半端なままっていうのもあれなので、
とりあえずソースコードをDropboxに挙げてダウンロードできるようにしてみた。

jquery.mousewheel.jsをダウンロードする

Adsense