it-swarm.com.de

event.wheelDelta gibt undefined zurück

Ich versuche also, das Scrollen auf meiner Seite zu deaktivieren, wenn meine Lightbox geöffnet wird, und ich fand dieses wirklich nützliche Skript, das genau das tut. ( http://jsfiddle.net/mrtsherman/eXQf3/3/ ), leider, wenn ich es auf meiner eigenen Seite verwende, war das Scrollen in meiner Lightbox ebenfalls deaktiviert. Ich habe angefangen, den Code nur mit Warnungen zu debuggen, um herauszufinden, dass event.wheelDelta auf meiner Seite "undefined" zurückgibt. In JSFiddle wird -120 zurückgegeben.

39
CupOfTea696

Das event-Objekt in einem jQuery-Ereignishandler spiegelt nicht das reale Ereignis wider. wheelDelta ist eine nicht standardmäßige EreigniseigenschaftIE und Opera, verfügbar über die originalEvent-Eigenschaft des jQuery-Ereignisses.

In jQuery 1.7 und höher ist die detail-Eigenschaft im jQuery-Ereignisobjekt nicht verfügbar. Sie sollten also event.originalEvent.detail to für diese Eigenschaft beim DOMMouseScroll-Ereignis verwenden. Diese Methode ist abwärtskompatibel mit älteren jQuery-Versionen.

event.originalEvent.wheelDelta

Demo: http://jsfiddle.net/eXQf3/22/
Siehe auch: 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);
            }
        });
    });
};

und wie folgt verwenden:

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

großes thx an @Mark für Jquery-Fying der Funktion (:

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

});

funktioniert in Webkit und FF, kann IE hier nicht prüfen :(

5
Ol Sen

Ich habe Ihre Lösung ausprobiert, psycho brm , und ich habe die Funktion extractDelta(e) geändert, damit sie in Firefox funktioniert. Anstelle von e.detail habe ich e.originalEvent.detail verwendet, weil Firefox ein undefiniertes Delta zurückgegeben hat. Ich habe die Lösung und meinen Testcode in dieses post hochgeladen. Ich hoffe, es hilft.

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

Wenn ich WheelDelta brauche, gebe ich die Veranstaltung an diesem kleinen Juwel weiter ...

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

Beispiel jQuery, bei dem ich das Delta zum Scrollen von Elementen mit der overflow:hidden-CSS-Regel verwendet habe ...

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

Hinweis: Umkehren Sie die Bildlaufrichtung, indem Sie Delta hinzufügen, anstatt das oben abgebildete Beispiel zu subtrahieren.

0
Mavelo