web-dev-qa-db-ja.com

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

JQueryでマウスホイールイベント（scrollイベントについて話していない）を取得する方法はありますか？

javascriptjquerymousewheel
120
thejh

マウスの上下のホイールと領域の速度を検出する プラグイン があります。

46
Darin Dimitrov
​$(document).ready(function(){
    $('#foo').bind('mousewheel', function(e){
        if(e.originalEvent.wheelDelta /120 > 0) {
            console.log('scrolling up !');
        }
        else{
            console.log('scrolling down !');
        }
    });
});
185
mahdi shahbazi

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
Louis Ameline

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

37
Brian Di Palma

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

 //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;
 });

stackoverflowから

15
Anjith K P

これがバニラソリューションです。関数に渡されたイベントがjQueryがjQueryイベントのプロパティとして利用できるようにするevent.originalEventである場合、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

14
Sergio

これは、各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");
            }
        });
    });
8
futuredayv

私は今日この問題で立ち往生していて、このコードが私のためにうまく働いているのを見つけました

$('#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
Prafull Sharma

このコードを使う

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

@DarinDimitrovが投稿したプラグイン、jquery-mousewheel、 jQuery 3以降では壊れています 。 jQuery 3+で動作する jquery-wheel を使用することをお勧めします。

JQueryを使いたくないのであれば、 MDNはmousewheelイベントの使用には細心の注意を払っています これは標準的ではないのでサポートされていない場所が多いためです。代わりに、 wheelイベントを使用する必要があります ということになります。値が何を意味しているのかを正確に特定することができます。ほとんどの主要ブラウザでサポートされています。

0
Coburn

言及された jquery mousewheel plugin を使用しているならば、イベントハンドラ関数の2番目の引数 - deltaを使用します。

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

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

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
Thomas Hartmann