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中，我印象是默认没有封装滚轮的，要不你就找插件，要不就用原生吧。简单、粗暴。