web-dev-qa-db-fra.com

event.wheelDelta renvoie undefined

J'essaie donc de désactiver le défilement sur ma page lorsque ma lightbox s'ouvre et j'ai trouvé ce script vraiment utile qui fait exactement cela. ( http://jsfiddle.net/mrtsherman/eXQf3/3/ ), malheureusement, lorsque je l'utilise sur ma propre page, le défilement est également désactivé dans ma lightbox. J'ai commencé à déboguer le code avec des alertes uniquement pour découvrir que event.wheelDelta renvoyait "indéfini" sur ma page, alors que dans JSFiddle , il retournait -120.

javascriptjqueryscroll
39
CupOfTea696

L'objet event dans un gestionnaire d'événements jQuery ne reflète pas l'événement réel. wheelDelta est une propriété d'événement non standardIE et Opéra, disponible via la propriété originalEvent de l'événement jQuery.

Dans jQuery 1.7+, la propriété detail n'est pas disponible sur l'objet événement jQuery. Donc, vous devriez également utiliser event.originalEvent.detail à pour cette propriété à l'événement DOMMouseScroll. Cette méthode est rétro-compatible avec les anciennes versions de jQuery.

event.originalEvent.wheelDelta

Démo: http://jsfiddle.net/eXQf3/22/
Voir aussi: http://api.jquery.com/category/events/event-object/

60
Rob W
$.fn.wheel = function (callback) {
    return this.each(function () {
        $(this).on('mousewheel DOMMouseScroll', function (e) {
            e.delta = null;
            if (e.originalEvent) {
                if (e.originalEvent.wheelDelta) e.delta = e.originalEvent.wheelDelta / -40;
                if (e.originalEvent.deltaY) e.delta = e.originalEvent.deltaY;
                if (e.originalEvent.detail) e.delta = e.originalEvent.detail;
            }

            if (typeof callback == 'function') {
                callback.call(this, e);
            }
        });
    });
};

et utiliser comme ceci:

$('body').wheel(function (e) {
    e.preventDefault();
    $('#myDiv').append($('<div>').text(e.delta));
});

merci beaucoup à @Mark pour la fonction jquery

12
psycho brm
$(this).on('mousewheel DOMMouseScroll', function(e){

  var dat = $(e.delegateTarget).data(); //in case you have set some, read it here.
  var datx = dat.x || 0; // just to show how to get specific out of jq-data object

  var eo = e.originalEvent;
  var xy = eo.wheelDelta || -eo.detail; //shortest possible code
  var x = eo.wheelDeltaX || (eo.axis==1?xy:0);
  var y = eo.wheelDeltaY || (eo.axis==2?xy:0); // () necessary!
  console.log(x,y);

});

fonctionne dans Webkit et FF, ne peut pas prouver IE ici :(

5
Ol Sen

J'ai essayé votre solution, psycho brm , et j'ai changé la fonction extractDelta(e) pour qu'elle fonctionne dans Firefox. Au lieu de e.detail, j'ai utilisé e.originalEvent.detail car Firefox a renvoyé un delta non défini. J'ai téléchargé la solution et mon code de test sur ce post . J'espère que ça aide.

function extractDelta(e) {
    if (e.wheelDelta) {
        return e.wheelDelta;
    }

    if (e.originalEvent.detail) {
        return e.originalEvent.detail * -40;
    }

    if (e.originalEvent && e.originalEvent.wheelDelta) {
        return e.originalEvent.wheelDelta;
    }
}
2
Timbergus

Quand j'ai besoin de WheelDelta, je passe l'événement à ce petit bijou ...

function getWheelDelta(event) {
    return event.wheelDelta || -event.detail || event.originalEvent.wheelDelta || -event.originalEvent.detail || -(event.originalEvent.deltaY * 25) || null;
}

Exemple jQuery où je l'ai utilisé pour obtenir le delta de défilement d'éléments avec la règle CSS overflow:hidden ...

$('#parent-id').on('wheel mousewheel DOMMouseScroll', function(event) {
    var node = $('#child-id');
    node.prop('scrollTop', parseFloat(node.prop('scrollTop')) - (getWheelDelta(event) / 2));
    return false;
});

Remarque: inversez la direction de défilement en ajoutant un delta au lieu de soustraire, comme dans l'exemple ci-dessus.

0
Mavelo