Dapatkan acara roda mouse di jQuery?


130

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


1
Pencarian cepat menemukan plugin ini yang dapat membantu.
Jerad Rose


@thejh memposting jawaban baru untuk ini dengan acara DOM3: stackoverflow.com/a/24707712/2256325
Sergio


Hanya catatan tentang ini. Jika Anda hanya ingin mendeteksi perubahan pada input, dan itu tidak mendeteksi perubahan melalui roda mouse, coba$(el).on('input', ...
rybo111

Jawaban:


46

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


35
plugin? ayolah .. periksa jawaban di bawah ini Anda dapat melakukannya tanpa

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
The DOMMouseScrollevent digunakan dalam FF, sehingga Anda harus mendengarkan pada kedua .bind('DOMMouseScroll mousewheel') {evetns developer.mozilla.org/en-US/docs/DOM/DOM_event_reference/...
mrzmyr

9
e.originalEvent.wheelDeltatidak terdefinisi dalam FF23
hofnarwillie

26
Anda tidak perlu membaginya dengan 120, itu tidak berguna
venimus

6
pasti jawaban terbaik

2
Tapi bagaimanapun, mengapa Anda ingin membaginya dengan 120? Apa itu konstan? (Anda tidak harus, seperti yang ditunjukkan venimus.)
mshthn

145

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

Lihat Penelusuran Gulir Pena Vanilla JS oleh Jesse Dupuy ( @ blindside85 ) pada CodePen .

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

Referensi:


Ini yang terbaik bagi saya. Namun, skrip ini berjalan per "klik" dari roda gulir. Ini bisa membuat kewalahan bagi beberapa skrip untuk digunakan. Apakah ada cara untuk memperlakukan setiap acara gulir sebagai satu contoh, alih-alih menjalankan skrip per klik roda gulir?
invot

Tidak terutama. Dari apa yang saya lihat, banyak orang akan menghindari berurusan dengan pelacakan gulir, atau mereka akan menggunakan penghitung waktu sebagai gantinya (misalnya memeriksa posisi pengguna pada halaman setiap x milidetik, dll). Jika ada solusi yang lebih performan di luar sana, saya pasti ingin tahu tentang itu!
Jesse Dupuy

1
Saya menemukan cara untuk melakukan ini: stackoverflow.com/questions/23919035/…
invot

1
Terima kasih atas pembaruannya. Bisakah Anda menyalin kode Anda ke jawaban Anda? Tidak pernah tahu apakah codepen akan turun suatu hari nanti. Itu pernah terjadi sebelumnya.
JDB masih mengingat Monica

2
@JesseDupuy, saya akan menaikkan jawaban ini, tetapi versi Anda yang diperbarui tidak berfungsi jika dokumen tersebut sesuai dengan tampilan ("width: 100vh; height: 100vh") atau mendapat "overflow: hidden;". "window.addEventListener ('scroll', callback)" bukan jawaban yang benar untuk "window.addEventListener ('mousewheel', callback)".
Daniel

45

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


37

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


20
Saya mencoba ini dan menemukan: "wheel" berfungsi di Firefox dan IE tetapi tidak Chrome. "roda mouse" berfungsi di Chrome dan IE tetapi tidak untuk Firefox. "DOMMouseScroll" hanya berfungsi di Firefox.
Curtis Yallop

1
Wah, ini menyelamatkan saya banyak waktu. Terima kasih!
gustavohenke

3
Sepertinya Chrome menambahkan dukungan untuk "roda" pada Agustus 2013: code.google.com/p/chromium/issues/detail?id=227454
rstackhouse

2
Safari masih tidak mendukung acara roda.
Thayne

Sebagai dokumentasi Anda mengatakan, wheelacara didukung pada Edge tidak IEyang tidak hal yang sama. CanIuse
Alex

16

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


14

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


8

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

5

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

4

gunakan kode ini

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

0

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;

});

0

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.


0

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

-3

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

Anda tidak mengatakan apa yang memiliki newUtilities.getMouseWheelDirection
ccsakuweb

Ini di luar cakupan pertanyaan ini. JADI itu bukan menyalin situs web pasta.
Szymon Toda
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.