スポンサードリンク

javascriptでマウスホイールを利用する

マウスホイールをくりくりして操作するようなユーザインターフェイスを作成したかったのでその時のサンプルです。

元ネタはここ: http://adomas.org/javascript-mouse-wheel/

onMousewheel (DOMMouseScroll)

３つのブラウザで動作するようになっています

ここではdivの大きさを変更していますが、よくあるパターンとしてはフォントサイズの変更とかでしょうか。

サンプル

var wheel = function() {
    var e = YAHOO.util.Event.getEvent();
    var el = YAHOO.util.Event.getTarget(e);
    var delta;
    if(e.wheelDelta){ /* IE/Opera */
        delta = e.wheelDelta/120;
        if(window.opera){ /* Opera9 */
            delta = -delta;
        }
    }else if(e.detail){ /* Firefox */
        delta = -e.detail/3;
    }

    var px = parseInt(YAHOO.util.Dom.getStyle(el, 'width').replace('px', ''));
    if(delta<0){ /* 下方向 */
        px+=10;
    }else{ /* 上方向 */
        px-=10;
    }
    if(px>=10 && px<=200){
        YAHOO.util.Dom.setStyle(el, 'width', px + 'px');
        YAHOO.util.Dom.setStyle(el, 'height', px + 'px');
    }
};

/* IE/Opera */
YAHOO.util.Event.addListener("wheeldiv", "mousewheel", wheel);
/* Firefox */
YAHOO.util.Event.addListener("wheeldiv", "DOMMouseScroll", wheel);

デモ

ここにマウスを乗せてホイールを動かしてください。

ポイント

元ネタの方はwindow全体に対してホイールをハンドルしていますが、このように部分的にハンドルすることも可能です。

ここではYUIを使っていますが、もちろん普通に書いても、他のライブラリでも同じことができるはずです。

メールアドレス:
コメント^*: