// creates a global "addWheelListener" method
// example: addWheelListener( elem, function( e ) { console.log( e.deltaY ); e.preventDefault(); } );
(function(window, document) {
var prefix = '';
var _addEventListener;
var _removeEventListener;
// var onwheel;
var support;
// detect event model
if (window.addEventListener) {
_addEventListener = 'addEventListener';
_removeEventListener = 'removeEventListener';
} else {
_addEventListener = 'attachEvent';
_removeEventListener = 'detachEvent';
prefix = 'on';
}
// detect available wheel event
support = 'onwheel' in document.createElement('div') ? 'wheel' // 各个厂商的高版本浏览器都支持"wheel"
: document.onmousewheel !== undefined ? 'mousewheel' // Webkit 和 IE一定支持"mousewheel"
: 'DOMMouseScroll'; // 低版本firefox
window.removeWheelListener = function(elem, callback) {
_removeWheelListener(elem, callback);
// handle MozMousePixelScroll in older Firefox
if (support === 'DOMMouseScroll') {
_removeWheelListener(elem, 'MozMousePixelScroll', callback);
}
};
window.addWheelListener = function(elem, callback, useCapture) {
_addWheelListener(elem, support, callback, useCapture);
// handle MozMousePixelScroll in older Firefox
if (support === 'DOMMouseScroll') {
_addWheelListener(elem, 'MozMousePixelScroll', callback, useCapture);
}
};
function _removeWheelListener(elem, eventName, callback) {
elem[ _removeEventListener ](prefix + eventName, callback);
}
function _addWheelListener(elem, eventName, callback, useCapture) {
callback = support === 'wheel' ? callback : function(originalEvent) {
!originalEvent && (originalEvent = window.event);
// create a normalized event object
var event = {
// keep a ref to the original event object
originalEvent: originalEvent,
target: originalEvent.target || originalEvent.srcElement,
type: 'wheel',
deltaMode: originalEvent.type === 'MozMousePixelScroll' ? 0 : 1,
deltaX: 0,
deltaZ: 0,
preventDefault: function() {
originalEvent.preventDefault
? originalEvent.preventDefault()
: originalEvent.returnValue = false;
}
};
// calculate deltaY (and deltaX) according to the event
if (support === 'mousewheel') {
event.deltaY = -1 / 40 * originalEvent.wheelDelta;
// Webkit also support wheelDeltaX
originalEvent.wheelDeltaX && (event.deltaX = -1 / 40 * originalEvent.wheelDeltaX);
} else {
event.deltaY = originalEvent.detail;
}
// it's time to fire the callback
return callback(event);
};
elem[ _addEventListener ](prefix + eventName, callback, useCapture || false);
}
})(window, document);
参考 MDN scroll