JQuery'de fare tekerleği etkinlikleri alınsın mı?

JQuery'de fare tekerleği olaylarını (olaylardan bahsetmeden scroll) almanın bir yolu var mı ?

Yukarı / aşağı fare tekerleğini ve bir bölge üzerindeki hızı algılayan bir eklenti var.

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

Her ikisine de bağlanmak mousewheelve DOMMouseScrollbenim için gerçekten iyi sonuç verdi:

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

Bu yöntem IE9 +, Chrome 33 ve Firefox 27'de çalışıyor.

Düzenleme - Mart 2016

Bir süredir bu konuyu tekrar gözden geçirmeye karar verdim. Kaydırma olayının MDN sayfası requestAnimationFrame, önceki algılama yöntemime göre oldukça tercih edilen, kullanılan kaydırma konumunu almak için harika bir yoldur . Kaydırma yönü ve konumuna ek olarak daha iyi uyumluluk sağlamak için kodlarını değiştirdim:

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

Bu kod şu anda çalışıyor Chrome v50, Firefox v44, Safari v9, and IE9+

Referanslar:

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

2017'den itibaren yazabilirsin

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

Mevcut Firefox 51, Chrome 56, IE9 + ile çalışır

"Fare tekerleği" olayından bahseden yanıtlar, kullanımdan kaldırılmış bir olaya atıfta bulunuyor. Standart olay basitçe "tekerlek" dir. Https://developer.mozilla.org/en-US/docs/Web/Reference/Events/wheel adresine bakın.

Bu benim için çalıştı :)

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

yığın taşmasından

İşte bir vanilya çözümü. İşleve iletilen event.originalEventolay jQuery'nin jQuery olayının özelliği olarak kullanılabilir hale getirdiği olay ise jQuery'de kullanılabilir. Ya içeride eğer callbackfonksiyonu biz ilk satırdan önce eklemek altında: event = event.originalEvent;.

Bu kod, tekerlek hızını / miktarını normalleştirir ve tipik bir farede ileriye doğru kaydırma için pozitif, geriye doğru fare tekerleği hareketinde negatiftir.

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

Ayrıca jQuery için kodda daha ayrıntılı ve fazladan şeker içeren bir eklenti de var: https://github.com/brandonaaron/jquery-mousewheel

Bu, her IE, Firefox ve Chrome'un en son sürümlerinde çalışıyor.

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

Bugün bu sayıya takılı kaldım ve bu kodun benim için iyi çalıştığını gördüm

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

bu kodu kullan

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

kombinasyonum buna benziyor. her aşağı / yukarı kaydırmada kaybolur ve belirir. aksi takdirde üstbilgiyi karartmak için başlığa yukarı kaydırmanız gerekir.

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

Yukarıdakiler dokunmatik / mobil için optimize edilmemiştir, bunun tüm mobil cihazlar için daha iyi olduğunu düşünüyorum:

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;

});

@DarinDimitrov yayınladığı eklenti, jquery-mousewheel, jQuery 3+ ile bozuldu . jquery-wheelJQuery 3+ ile çalışan hangisinin kullanılması daha tavsiye edilir .

JQuery rotasına gitmek istemiyorsanız, MDN, mousewheelolayı standart olmadığı ve pek çok yerde desteklenmediği için kullanırken son derece uyarıyor . Bunun yerine, aldığınız değerlerin tam olarak ne anlama geldiği konusunda çok daha fazla özgüllük elde ettiğiniz için etkinliği kullanmanız gerektiğiniwheel söylüyor . Çoğu büyük tarayıcı tarafından desteklenir.

Sözü kullanılması halinde jQuery Fare tekerleğinin eklenti , o zaman ne olay işleyici işlevinin 2 argüman kullanılacağı hakkında - delta:

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

Geçenlerde aynı sorunu nerede $(window).mousewheeldönüyordumundefined

Ne yaptım $(window).on('mousewheel', function() {});

Daha fazla işlemek için kullanıyorum:

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

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