/ JavaScript

鼠标滚轮事件

浏览器前端兼容问题无处不在……

// 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 获取滚轮事件的属性。