event.wheelDelta返回undefined

Question

所以当我的灯箱打开时，我正试图在我的页面上禁用滚动，我发现这个非常有用的脚本正是这样做的。 （ http://jsfiddle.net/mrtsherman/eXQf3/3/ ），不幸的是，当我在自己的页面上使用它时，它也禁止在我的灯箱中滚动。 我开始使用警报调试代码，但发现event.wheelDelta在我的页面上返回“undefined”，而在JSFiddle中 ，它返回-120。

Answer 1

jQuery事件处理程序中的event对象不反映真实事件。 wheelDelta是^IE和Opera的非标准事件属性，可通过jQuery事件的originalEvent属性获得。

在jQuery 1.7+中，jQuery Event对象中没有detail属性。 因此，您还应该在DOMMouseScroll事件中使用event.originalEvent.detail来获取此属性。 此方法与旧的jQuery版本向后兼容。

event.originalEvent.wheelDelta

演示： http ： //jsfiddle.net/eXQf3/22/
另见： http ： //api.jquery.com/category/events/event-object/

Answer 2

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

并使用这样的：

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

为了jquery-fying函数，给@Mark做了大事（：

Answer 3

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

});

在Webkit和FF中工作，不能在这里证明IE :(

Answer 4

我已经尝试过你的解决方案， psycho brm ，我已经改变了函数extractDelta(e) ，使其在Firefox中运行。 取而代之的e.detail我用e.originalEvent.detail因为火狐返回一个未定义的三角洲。 我已将解决方案和测试代码上传到此帖子 。 我希望它有所帮助。

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

Answer 5

当我需要WheelDelta时，我将事件传递给这个小宝石......

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

示例jQuery我使用它来获取带有overflow:hidden CSS规则的滚动元素的delta ...

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

注意：通过添加delta而不是像上面的示例一样减去反向滚动方向。