div 上のスクロールホイールへのバインド 質問する

div 上のスクロールホイールへのバインド 質問する

ブラウザで画像エディタを作成中です。コントロールのコードはすべて完成しています。次に、ホット キーとマウス ボタンをマッピングしたいと思います。キーボードは簡単ですが、マウスはそうではありません。

マウスがキャンバス div の上にあるときと、マウス ホイールがその上に移動されたときを検出する必要があります。マウス オーバーの部分は難しくありませんが、マウス ホイールへのバインドに問題があります。

試してみましたが、ホイールの下がスクロールするように設定されているjQuery.scroll場合にのみ機能するようです。私の場合はそうではありません。オフセットはスクリプトで制御されます。divcanvas

注意事項:

  • 私は jQuery をベースとして使用しています。
  • 実際には何もスクロールしていません。実際にスクロールせずにスクロール ホイールにイベントをバインドしようとしています。

構造

<div id="pageWrap">
    [page head stuff...]
    <div id="canvas">
        [the guts of the canvas go here; lots of various stuff...]
    <div>
    [page body and footer stuff...]
</div>

ベストアンサー1

非常に簡単な実装は次のようになります。

$(document).ready(function(){
    $('#foo').bind('mousewheel', function(e){
        if(e.originalEvent.wheelDelta/120 > 0) {
            $(this).text('scrolling up !');
        }
        else{
            $(this).text('scrolling down !');
        }
    });
});​

http://www.jsfiddle.net/5t2MN/5/

おすすめ記事