js鼠标滚轮事件如何做兼容

Question

兼容谷歌，火狐，IE

Answer 1

window.onload=function()
    {
        var oBox=document.getElementById('box');
        
        wheel(oBox,function(down){
            alert(down);
        });
    }
    
    function wheel(obj,wheelFn)
    {
        window.navigator.userAgent.indexOf('Firefox')!=-1 ? obj.addEventListener('DOMMouseScroll',fn,false) : addEvent(obj,'mousewheel',fn);
        
        function fn(ev)
        {
            var oEvent=ev||event;
            var down=oEvent.wheelDelta ? down=oEvent.wheelDelta<0 : down=oEvent.detail>0;
            ev.preventDefault&&ev.preventDefault();
            wheelFn&&wheelFn(down);
            return false;
        }
    }
    
    function addEvent(obj,sEv,fn)
    {
         obj.addEventListener ? obj.addEventListener(sEv,fn,false) : obj.attachEvent('on'+sEv,fn);
    }

Answer 2

jquery-mousewheel

Answer 3

const mousewheelEventName = !!window.navigator.userAgent.match(/firefox/i) ? 'DOMMouseScroll' : 'mousewheel';
// 滚轮事件
document.addEventListener(mousewheelEventName, (e) => {
    const delta = e.wheelDelta ? e.wheelDelta : -e.detail;
    if (delta > 1) {
      console.log('往前');
      // 以下就是你要写的自定义代码
    }else{
      console.log('往后');
      // 以下就是你要写的自定义代码;
    }
}, { passive: false });