浏览器前端兼容问题无处不在……
// Firefox
$('#elem').bind('DOMMouseScroll', function(e) {
if (e.originalEvent.detail > 0) {
// scroll down
console.log('Down');
} else {
// scroll up
console.log('Up');
}
// prevent page fom scrolling
return false;
});
// IE, Opera, Safari
$('#elem').bind('mousewheel', function(e) {
if (e.originalEvent.wheelDelta < 0) {
// scroll down
console.log('Down');
} else {
// scroll up
console.log('Up');
}
// prevent page fom scrolling
return false;
});
跨浏览器处理(基于jQuery,demo):
$('#elem').on('DOMMouseScroll mousewheel', function(event) {
if (event.originalEvent.detail > 0 ||
event.originalEvent.wheelDelta < 0) { //alternative options for wheelData: wheelDeltaX & wheelDeltaY
// scroll down
console.log('Down');
} else {
// scroll up
console.log('Up');
}
// prevent page fom scrolling
return false;
});
参考链接:
2015.01.06: 如果使用 Zepto,event
参数没有包装,和原生的事件对象一样,直接通过 event.wheelDelta
/event.detail
获取滚轮事件的属性。