Question

js中鼠标滚轮事件（只有在火狐浏览器中使用正常，在别的浏览器中都无法正常使用滚轮来移动页面）

以下是我引用的js代码（怎么样实现兼容）

(function($) {
var mousewheel = document.all?"mousewheel":"DOMMouseScroll";
var types = ['DOMMouseScroll', 'mousewheel'];

$.event.special.mousewheel = {
setup: function() {
if ( document.addEventListener ) {
for ( var i=types.length; i; ) {
document.addEventListener( types[--i], handler, false );
}
} else {
document.onmousewheel = handler;
}
},

teardown: function() {
if ( document.removeEventListener ) {
for ( var i=types.length; i; ) {
document.removeEventListener( types[--i], handler, false );
}
} else {
document.onmousewheel = null;
}
}
};

$.fn.extend({
mousewheel: function(fn) {
return fn ? document.bind("mousewheel", fn) : document.trigger("mousewheel");
},

unmousewheel: function(fn) {
return document.unbind("mousewheel", fn);
}
});

function handler(event) {
var orgEvent = event || window.event, args = [].slice.call( arguments, 1 ), delta = 0, returnValue = true, deltaX = 0, deltaY = 0;
event = $.event.fix(orgEvent);
event.type = "mousewheel";

// Old school scrollwheel delta
if ( event.wheelDelta ) { delta = event.wheelDelta/120; }
if ( event.detail ) { delta = -event.detail/3; }

// New school multidimensional scroll (touchpads) deltas
deltaY = delta;

// Gecko
if ( orgEvent.axis !== undefined && orgEvent.axis === orgEvent.HORIZONTAL_AXIS ) {
deltaY = 0;
deltaX = -1*delta;
}

// Webkit
if ( orgEvent.wheelDeltaY !== undefined ) { deltaY = orgEvent.wheelDeltaY/120; }
if ( orgEvent.wheelDeltaX !== undefined ) { deltaX = -1*orgEvent.wheelDeltaX/120; }

// Add event and delta to the front of the arguments
args.unshift(event, delta, deltaX, deltaY);

return $.event.handle.apply(document, args);
}

})(jQuery);

Answer 1

你得先搞清楚 wheelDelta 和 detail