firefox下监听滚动条的兼容问题

Question

 window.onmousewheel = document.onmousewheel=function (e) {
            console.log('aaa')
            var valueoffsetT = $('.value-box').offset().top;
            var ST = $('body').scrollTop();
            var windowH = $(window).height();
            console.log(valueoffsetT,ST,windowH)

            var courseoffsetT = $('.course-box').offset().top;
            var ST = $('body').scrollTop();
            var windowH = $(window).height();
            if (valueoffsetT - ST - windowH < -40) {
                $('.value-box').show();
                $('.value-box').addClass('fadeInUp ');
            }
            if (courseoffsetT - ST - windowH < -15) {
                $('.course-box').show();
                $('.course-box').addClass('fadeInUp ');
            }
        };

用$(window).scroll在火狐下不行 上面这么写也不行 怎么写才能更好的兼容呢

Answer 1

火狐下面的滚动条滚动事件是:
obj.addEventListener('DOMMouseScroll',fnCallBack,false);

分享你一个封装好的函数:

function addEvent(obj,sEv,fn){
    if(obj.addEventListener){
        obj.addEventListener(sEv,fn,false);
    }else{
        obj.attachEvent('on'+sEv,fn);
    }
}
function addWheel(obj,fn){
    
    function fnWheel(ev){
        var oEvent=ev || event;
        var bDown=false;

        bDown=oEvent.wheelDelta?oEvent.wheelDelta<0:oEvent.detail>0;
        
        fn && fn(oEvent,bDown);
        oEvent.preventDefault && oEvent.preventDefault();
        return false;
    }
    
    if(window.navigator.userAgent.indexOf('Firefox')!=-1){
        obj.addEventListener('DOMMouseScroll',fnWheel,false);    
    }else{
        addEvent(obj,'mousewheel',fnWheel);
    }
}

使用也很简单:

addWheel(obj,function(ev,down){
    //TODO
})

jq中，我印象是默认没有封装滚轮的，要不你就找插件，要不就用原生吧。简单、粗暴。

Answer 2

直接放MDN链接吧：MDN - 滚轮事件，里边“跨浏览器监听滚动事件”那段直接给了个封好的兼容库，直接拿去用就好。