jQueryでマウスホイールイベントを取得しますか?


130

scrolljQueryでマウスホイールイベント(イベントについて話していない)を取得する方法はありますか?


1
クイック検索でこのプラグインが見つかりました。
ジェラドローズ

このソリューションは私にとって
有効

@thejhがDOM3イベントでこれに関する新しい回答を投稿しました:stackoverflow.com/a/24707712/2256325
Sergio


これに関するメモ。入力の変更を検出するだけで、マウスホイールによる変更を検出しない場合は、試してください$(el).on('input', ...
rybo111

回答:



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

51
DOMMouseScrollあなたは、両方をリッスンするようにしなければならないので、イベントは、FFで使用されている.bind('DOMMouseScroll mousewheel') {evetns developer.mozilla.org/en-US/docs/DOM/DOM_event_reference/...
mrzmyr

9
e.originalEvent.wheelDeltaFF23では未定義
hofnarwillie

26
120で除算する必要はありません
。CPUの

6
正解だったに違いありません

2
しかし、とにかく、なぜそれを120で割りたいのでしょうか。その定数は何ですか?(venimusが指摘したように、その必要はありません。)
mshthn

145

両方に結合mousewheelし、DOMMouseScroll私のために本当によく働くことになりました。

$(window).bind('mousewheel DOMMouseScroll', function(event){
    if (event.originalEvent.wheelDelta > 0 || event.originalEvent.detail < 0) {
        // scroll up
    }
    else {
        // scroll down
    }
});

このメソッドは、IE9 +、Chrome 33、Firefox 27で機能します。


編集-2016年3月

しばらく前からこの問題を再検討することにしました。スクロールイベントのMDNページには、を使用するスクロール位置を取得する優れた方法がありrequestAnimationFrame、これは以前の検出方法よりも非常に適しています。スクロールの方向と位置に加えて、互換性を高めるためにコードを変更しました。

(function() {
  var supportOffset = window.pageYOffset !== undefined,
    lastKnownPos = 0,
    ticking = false,
    scrollDir,
    currYPos;

  function doSomething(scrollPos, scrollDir) {
    // Your code goes here...
    console.log('scroll pos: ' + scrollPos + ' | scroll dir: ' + scrollDir);
  }

  window.addEventListener('wheel', function(e) {
    currYPos = supportOffset ? window.pageYOffset : document.body.scrollTop;
    scrollDir = lastKnownPos > currYPos ? 'up' : 'down';
    lastKnownPos = currYPos;

    if (!ticking) {
      window.requestAnimationFrame(function() {
        doSomething(lastKnownPos, scrollDir);
        ticking = false;
      });
    }
    ticking = true;
  });
})();

CodePenで Jesse Dupuy(@ blindside85)による Pen Vanilla JS Scroll Trackingを参照してください。

このコードは現在動作しています Chrome v50, Firefox v44, Safari v9, and IE9+

参照:


これは私にとって最も効果的でした。ただし、このスクリプトはスクロールホイールの「クリック」ごとに実行されます。これは、一部のスクリプトを使用するのに非常に困難な場合があります。スクロールホイールのクリックごとにスクリプトを実行するのではなく、各スクロールイベントを1つのインスタンスとして扱う方法はありますか?
14年

特にありません。私が見たところから、多くの人はスクロールトラッキングの処理を回避するか、代わりにタイマーを使用します(たとえば、xミリ秒ごとにページ上のユーザーの位置を確認するなど)。もっと高性能なソリューションがある場合は、間違いなく知りたいです。
Jesse Dupuy 2014

1
私はこれを行うための方法が見つかりました:stackoverflow.com/questions/23919035/...を
invot

1
更新していただきありがとうございます。コードを回答にコピーできますか?codepenがいつかダウンするかどうか決して知らないでください。それは以前に起こりました。
JDBはまだモニカを記憶しています

2
@JesseDupuy、私はこの回答に賛成しますが、ドキュメントがビューに収まる(「幅:100vh;高さ:100vh」)、または「オーバーフロー:非表示;」になった場合、更新されたバージョンは機能しません。「window.addEventListener( 'scroll'、callback)」は「window.addEventListener( 'mousewheel'、callback)」に対する正しい答えではありません。
ダニエル

45

2017年の現在、あなたはただ書くことができます

$(window).on('wheel', function(event){

  // deltaY obviously records vertical scroll, deltaX and deltaZ exist too
  if(event.originalEvent.deltaY < 0){
    // wheeled up
  }
  else {
    // wheeled down
  }
});

現在のFirefox 51、Chrome 56、IE9 +で動作します


37

「マウスホイール」イベントについての回答は、非推奨のイベントを指します。標準イベントは単に「ホイール」です。https://developer.mozilla.org/en-US/docs/Web/Reference/Events/wheelを参照してください


20
私はこれらを試してみましたが、「ホイール」はFirefoxとIEでは機能しますがChromeでは機能しません。「マウスホイール」はChromeとIEでは機能しますが、Firefoxでは機能しません。「DOMMouseScroll」はFirefoxでのみ機能します。
Curtis Yallop 2013

1
おっと、これは私に多くの時間を節約しました。ありがとう!
gustavohenke 2013年

3
2013年8月にChromeが「ホイール」のサポートを追加したようです:code.google.com/p/chromium/issues/detail
id=

2
Safariはホイールイベントをまだサポートしていません。
Thayne

あなたのドキュメントが言うように、wheelイベントはEdge not IEでサポートされていますが、これは同じではありません。CanIuse
アレックス

16

これは私のために働きました:)

 //Firefox
 $('#elem').bind('DOMMouseScroll', function(e){
     if(e.originalEvent.detail > 0) {
         //scroll down
         console.log('Down');
     }else {
         //scroll up
         console.log('Up');
     }

     //prevent page fom scrolling
     return false;
 });

 //IE, Opera, Safari
 $('#elem').bind('mousewheel', function(e){
     if(e.originalEvent.wheelDelta < 0) {
         //scroll down
         console.log('Down');
     }else {
         //scroll up
         console.log('Up');
     }

     //prevent page fom scrolling
     return false;
 });

スタックオーバーフローから


14

これがバニラソリューションです。関数に渡されるイベントがevent.originalEventjQueryがjQueryイベントのプロパティとして利用できるようにする場合、jQueryで使用できます。または、callback下の関数内の場合、最初の行の前に追加しますevent = event.originalEvent;

このコードは、ホイールの速度/量を正規化し、通常のマウスでは前方にスクロールする場合に正、マウスホイールの後方に移動すると負になります。

デモ:http : //jsfiddle.net/BXhzD/

var wheel = document.getElementById('wheel');

function report(ammout) {
    wheel.innerHTML = 'wheel ammout: ' + ammout;
}

function callback(event) {
    var normalized;
    if (event.wheelDelta) {
        normalized = (event.wheelDelta % 120 - 0) == -0 ? event.wheelDelta / 120 : event.wheelDelta / 12;
    } else {
        var rawAmmount = event.deltaY ? event.deltaY : event.detail;
        normalized = -(rawAmmount % 3 ? rawAmmount * 10 : rawAmmount / 3);
    }
    report(normalized);
}

var event = 'onwheel' in document ? 'wheel' : 'onmousewheel' in document ? 'mousewheel' : 'DOMMouseScroll';
window.addEventListener(event, callback);

jQueryのプラグインもあります。これはコードでより冗長で、いくつかの余分な砂糖があります:https : //github.com/brandonaaron/jquery-mousewheel


8

これは、各IE、Firefox、Chromeの最新バージョンで機能しています。

$(document).ready(function(){
        $('#whole').bind('DOMMouseScroll mousewheel', function(e){
            if(e.originalEvent.wheelDelta > 0 || e.originalEvent.detail < 0) {
                alert("up");
            }
            else{
                alert("down");
            }
        });
    });

5

私は今日この問題に行き詰まり、このコードが私にとってはうまく機能していることがわかりました

$('#content').on('mousewheel', function(event) {
    //console.log(event.deltaX, event.deltaY, event.deltaFactor);
    if(event.deltaY > 0) {
      console.log('scroll up');
    } else {
      console.log('scroll down');
    }
});

4

このコードを使用

 knob.bind('mousewheel', function(e){  
 if(e.originalEvent.wheelDelta < 0) {
    moveKnob('down');
  } else {
    moveKnob('up');
 }
  return false;
});

0

私の組み合わせはこのようになります。スクロールダウン/アップするたびにフェードアウトおよびフェードインします。そうでない場合は、ヘッダーをフェードインするために、ヘッダーまで上にスクロールする必要があります。

var header = $("#header");
$('#content-container').bind('mousewheel', function(e){
    if(e.originalEvent.wheelDelta > 0) {
        if (header.data('faded')) {
            header.data('faded', 0).stop(true).fadeTo(800, 1);
        }
    }
    else{
        if (!header.data('faded')) header.data('faded', 1).stop(true).fadeTo(800, 0);
    }
});

上記のものはタッチ/モバイル用に最適化されていません、これはすべてのモバイルでより良いと思います:

var iScrollPos = 0;
var header = $("#header");
$('#content-container').scroll(function () {

    var iCurScrollPos = $(this).scrollTop();
    if (iCurScrollPos > iScrollPos) {
        if (!header.data('faded')) header.data('faded', 1).stop(true).fadeTo(800, 0);

    } else {
        //Scrolling Up
        if (header.data('faded')) {
            header.data('faded', 0).stop(true).fadeTo(800, 1);
        }
    }
    iScrollPos = iCurScrollPos;

});

0

@DarinDimitrovが掲載さというプラグインは、jquery-mousewheeljQueryの3+で破壊されますjquery-wheeljQuery 3+で動作するを使用することをお勧めします。

jQueryルートを使いmousewheelたくない場合、MDNは非標準で多くの場所でサポートされていないイベント使用することを強く警告します。代わりにwheel取得している値が何を意味するかについてより具体的に取得するために、イベント使用する必要があると述べています。ほとんどの主要なブラウザでサポートされています。


0

上記のjqueryマウスホイールプラグインを使用している場合、イベントハンドラー関数の2番目の引数を使用するとどうなるでしょうかdelta

$('#my-element').on('mousewheel', function(event, delta) {
    if(delta > 0) {
    console.log('scroll up');
    } 
    else {
    console.log('scroll down');
    }
});

-3

最近$(window).mousewheel戻ってきた場所で同じ問題が発生しました undefined

私がしたことは $(window).on('mousewheel', function() {});

さらにそれを処理するために私は使用しています:

function (event) {
    var direction = null,
        key;

    if (event.type === 'mousewheel') {
        if (yourFunctionForGetMouseWheelDirection(event) > 0) {
            direction = 'up';
        } else {
            direction = 'down';
        }
    }
}

newUtilities.getMouseWheelDirectionがあるものは言わなかった
ccsakuweb

この質問の範囲外です。だからそれはコピー貼り付けのウェブサイトではありません。
Szymon Toda 2014
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.