所以我试图在我的灯箱打开时禁用我的页面上的滚动，我发现这个非常有用的脚本正是这样做的。（http://jsfiddle.net/mrtsherman/eXQf3/3/），不幸的是，当我在自己的页面上使用它时，它也禁用了我的灯箱中的滚动。我开始使用警报调试代码，结果发现 event.wheelDelta 在我的页面上返回“未定义”，而在JSFiddle 中，它返回 -120。
event.wheelDelta 返回未定义
IT技术
javascript
jquery
scroll
2021-02-01 03:16:39
5个回答
eventjQuery 事件处理程序中的对象不反映真实事件。wheelDelta是IE 和 Opera的非标准事件属性，可通过originalEventjQuery 事件的属性获得。
在 jQuery 1.7+ 中，该detail属性在 jQuery 事件对象中不可用。因此，您还应该event.originalEvent.detail在DOMMouseScroll活动中使用 to 作为此属性。此方法向后兼容旧的 jQuery 版本。
event.originalEvent.wheelDelta
演示：http : //jsfiddle.net/eXQf3/22/
另见：http : //api.jquery.com/category/events/event-object/
$.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));
});
非常感谢@Mark 用于 jquery-fying 函数（：
$(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 :(
我已经尝试了您的解决方案Psycho brm，并且我已经更改了该功能extractDelta(e)以使其在 Firefox 中工作。而不是e.detail我使用，e.originalEvent.detail因为 Firefox 返回了一个未定义的增量。我已将解决方案和我的测试代码上传到这篇文章。我希望它有帮助。
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;
}
}
当我需要 WheelDelta 时，我会将事件传递给这个小宝石......
function getWheelDelta(event) {
return event.wheelDelta || -event.detail || event.originalEvent.wheelDelta || -event.originalEvent.detail || -(event.originalEvent.deltaY * 25) || null;
}
示例 jQuery，我使用它来获取使用overflow:hiddenCSS 规则滚动元素的增量...
$('#parent-id').on('wheel mousewheel DOMMouseScroll', function(event) {
var node = $('#child-id');
node.prop('scrollTop', parseFloat(node.prop('scrollTop')) - (getWheelDelta(event) / 2));
return false;
});
注意：通过添加增量而不是像上面的示例那样减去来反转滚动方向。