Dapatkan acara roda mouse di jQuery?

Apakah ada cara untuk mendapatkan acara roda mouse (tidak berbicara tentang scrollacara) di jQuery?

Ada plugin yang mendeteksi roda dan kecepatan mouse atas / bawah di suatu wilayah.

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

Mengikat keduanya mousewheeldan DOMMouseScrollakhirnya bekerja dengan sangat baik untuk saya:

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

Metode ini bekerja di IE9 +, Chrome 33, dan Firefox 27.

Sunting - Mar 2016

Saya memutuskan untuk meninjau kembali masalah ini karena sudah lama. Halaman MDN untuk acara gulir memiliki cara yang bagus untuk mengambil posisi gulir yang memanfaatkan requestAnimationFrame, yang sangat disukai untuk metode deteksi saya sebelumnya. Saya memodifikasi kode mereka untuk memberikan kompatibilitas yang lebih baik selain arah dan posisi gulir:

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

Kode ini sedang bekerja di Chrome v50, Firefox v44, Safari v9, and IE9+

Referensi:

• https://developer.mozilla.org/en-US/docs/Web/Events/scroll
• https://developer.mozilla.org/en-US/docs/Web/Events/wheel

Sampai sekarang di 2017, Anda bisa menulis

$(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
  }
});

Bekerja dengan Firefox 51, Chrome 56, IE9 + saat ini

Jawaban yang berbicara tentang acara "roda mouse" mengacu pada acara yang sudah usang. Acara standar hanyalah "roda". Lihat https://developer.mozilla.org/en-US/docs/Web/Reference/Events/wheel

Ini bekerja untuk saya :)

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

dari stackoverflow

Ini solusi vanilla. Dapat digunakan di jQuery jika acara dilewatkan ke fungsi event.originalEventyang jQuery tersedia sebagai properti dari acara jQuery. Atau jika di dalam callbackfungsi di bawah kita tambahkan sebelum baris pertama:event = event.originalEvent; .

Kode ini menormalkan kecepatan / jumlah roda dan positif untuk apa yang akan menjadi gulir maju pada mouse tipikal, dan negatif pada gerakan roda mouse mundur.

Demo: 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);

Ada juga plugin untuk jQuery, yang lebih bertele-tele dalam kode dan sedikit gula tambahan: https://github.com/brandonaaron/jquery-mousewheel

Ini berfungsi di setiap versi terbaru IE, Firefox dan Chrome.

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

Saya terjebak dalam masalah ini hari ini dan menemukan kode ini berfungsi dengan baik untuk saya

$('#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');
    }
});

gunakan kode ini

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

kombinasi saya terlihat seperti ini. itu memudar dan memudar pada setiap gulir ke bawah / atas. jika tidak, Anda harus gulir ke atas ke tajuk, untuk memudar tajuk di.

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

yang di atas tidak dioptimalkan untuk sentuhan / ponsel, saya pikir yang ini lebih baik untuk semua ponsel:

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;

});

Plugin yang diposting oleh @DarinDimitrov jquery-mousewheel, rusak dengan jQuery 3+ . Akan lebih disarankan untuk menggunakan jquery-wheelyang berfungsi dengan jQuery 3+.

Jika Anda tidak ingin pergi rute jQuery, MDN sangat berhati-hati menggunakan mousewheelacara karena tidak standar dan tidak didukung di banyak tempat. Sebaliknya itu mengatakan bahwa Anda harus menggunakan wheelacara karena Anda mendapatkan lebih banyak spesifisitas tentang apa nilai yang Anda dapatkan. Ini didukung oleh sebagian besar browser utama.

Jika menggunakan plugin jquery mousewheel yang disebutkan , lalu bagaimana menggunakan argumen ke-2 dari fungsi event handler - delta:

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

Saya mendapat masalah yang sama baru-baru ini di mana $(window).mousewheelkembaliundefined

Apa yang saya lakukan adalah $(window).on('mousewheel', function() {});

Selanjutnya untuk memprosesnya saya menggunakan:

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

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