做前端的最難的就是要做的每種瀏覽器都相容，往往我們只能做到其中一種是相容，而且就一種瀏覽器而言也是有不同的版本，也並非是每個版本都是能夠做到相容，今天就遇到了一個很鬧心的問題，同樣的一段程式碼，在ie上能夠完美執行，在谷歌上卻不好使了，下面帶大家看看滑鼠的滾輪事件。

原生的滾輪事件：火狐與其他瀏覽器使用了不同的事件

/* 
 * 滾輪事件只有firefox比較特殊，使用DOMMouseScroll; 其他瀏覽器使用mousewheel;
 * 
*/
// firefox
document.body.addEventListener("DOMMouseScroll", function(event) {


    var direction= event.detail && (event.detail > 0 ? "mousedown" : "mouseup");
    console.log(direction);    
});


// chrome and ie
document.body.onmousewheel = function (event) {
    event = event || window.event;


    var direction = event.wheelDelta && (event.wheelDelta > 0 ? "mouseup" : "mousedown");
    console.log(direction);
};

使用jquery相容後的事件

// jquery 相容的滾輪事件
$(document).on("mousewheel DOMMouseScroll", function (e) {
    
    var delta = (e.originalEvent.wheelDelta && (e.originalEvent.wheelDelta > 0 ? 1 : -1)) ||  // chrome & ie
                (e.originalEvent.detail && (e.originalEvent.detail > 0 ? -1 : 1));              // firefox


    
    if (delta > 0) {
        // 向上滾
        console.log("wheelup");
    } else if (delta < 0) {
        // 向下滾
        console.log("wheeldown");
    }
});