jQuery fare tekerleği eklentisi özelleştirme

Question

Tam ekran kaydırıcım var ve fare tekerleği kullanarak gezinmeyi etkinleştirmek istiyorum. Bir fare tekerleği olayını algılamak için jQuery mousewheel eklentisinin en iyi seçenek olduğunu düşündüm.

İçerdiği yangın ve yangın işlevleri. Ama istediğim şekilde yapılandıramayacağım (ve herhangi bir kaynak bulamadım).

Belirli miktarda kaydırılmış piksel olup olmadığını kontrol etmek istiyorum. Örneğin, fare tekerleği 20px up'u kaydırmaya çalışıyorsa, bir işlevi tetiklemek istiyorum veya başka bir işlev için 20px down.

​$(document).ready(function(){ 
    $('body').bind('mousewheel', function(e){ 
     if(e.originalEvent.wheelDelta /120 > 0) { 
      alert('Wait! I fire way too often!'); 
     } 
     else{ 
      alert('We are going down, way too msuch alerts!'); 
     } 
    }); 
}); 

JS FIDDLE Doğru, çok sık olaylar yangın görüyoruz sorununuzu anlamak

Answer 1

(Yukarı/Aşağı kaydırın). Buradaki sorun, herhangi bir kaydırma eylemi için olayın birkaç kez ateşlenmesidir. Geliştirici konsolunu tarayıcınızda açar ve bir console.log(e.originalEvent.wheelDelta) yaparsanız bunu görebilirsiniz. Bu, büyük bir kaydırma işlemini birkaç küçük kaydırma olayına bölebilir ve istediğiniz davranışı atar.

$(document).ready(function(){ 
    var scrollPixels = 0; // variable to store scroll delta 

    $('body').bind('mousewheel', function(e){ 
     // increment/decrement scroll delta 
     scrollPixels += e.originalEvent.wheelDelta; 
     console.log(scrollPixels); 

     if (scrollPixels < -20) { 
      scrollPixels = 0; // clear scroll delta 
      alert('Coming down!'); 
     } 
     else if (scrollPixels > 20){ 
      scrollPixels = 0; // clear scroll delta 
      alert('Coming up!'); 
     } 
    }); 
}); 

Daha sonra yukarı veya aşağı uyarısı yangınlardan sonra kaydırma delta temizleyebilirsiniz: Bunu ele yönlü kaydırma delta tutmak için bir değişken kullanmaktı.

JS Fiddle

Ayrıca çoğu kaydırır bu olayı gibi 20'den fazla piksele testinizi artırmak isteyebilirsiniz - 20 piksel sadece yaklaşık 1/4 inç olduğunu.

Bu yardımcı olur umarım. Bu, sorununuzu çözmezse, yanlış gittiğime yorum yapmaktan çekinmeyin. Şansın en iyisi! adres yorumuna

---

Güncelleme: kaydırma kaydırma yürütme durduktan sonra kısa bir miktarda (bu örnekte 250 ms) bekleyecek bir zaman aşımı ayarlayarak durana kadar

bekleyebilirsin.

$(document).ready(function(){ 
    var scrollPixels = 0; // variable to store scroll delta 
    var scrolling; // timeout function var 

    $('body').bind('mousewheel', function(e){ 
     // increment/decrement scroll delta 
     scrollPixels += e.originalEvent.wheelDelta; 
     console.log(scrollPixels); 

     clearTimeout(scrolling); 
     scrolling = setTimeout(function() { 
     console.log('stop wheeling! ', scrollPixels); 
     scrolling = undefined; 

     if (scrollPixels < -300) { 
      scrollPixels = 0; // clear scroll delta 
      alert('Coming down!'); 
     } 
     else if (scrollPixels > 300){ 
      scrollPixels = 0; // clear scroll delta 
      alert('Coming up!'); 
     } 

    }, 250); 
    }); 
}); 

JS Fiddle