js中鼠标滚轮事件

一、原生js 实现：

var scrollFunc = function (e) {  
        e = e || window.event;  
        if (e.wheelDelta) {  //判断浏览器IE，谷歌滑轮事件               
            if (e.wheelDelta > 0) { //当滑轮向上滚动时  
               alert('上滚')
            }  
            if (e.wheelDelta < 0) { //当滑轮向下滚动时  
                 alert('下滚')
            }  
        } else if (e.detail) {  //Firefox滑轮事件  
            if (e.detail> 0) { //当滑轮向下滚动时  
               alert('下滚')
            }  
            if (e.detail< 0) { //当滑轮向上滚动时  
                alert('上滚')  
            }  
        }  
    } 
    /*IE、Opera注册事件*/
    if(document.attachEvent){
        document.attachEvent('onmousewheel',scrollFunc);
 
    }
    //Firefox使用addEventListener添加滚轮事件  
    if (document.addEventListener) {//firefox  
        document.addEventListener('DOMMouseScroll', scrollFunc, false);  
    }  
    //Safari与Chrome属于同一类型
    window.onmousewheel = document.onmousewheel = scrollFunc; 
     /*
    event.wheelDelta 滚动方向
    上：120
    下：-120
    Firefox：event.detail 滚动方向
    上：-3
    下:3
    */ 

二、 JQ实现：

 $(document).bind('mousewheel DOMMouseScroll',function(event){ //on也可以 bind监听
        //Chorme
        var wheel = event.originalEvent.wheelDelta;
        var detal = event.originalEvent.detail;
        if (event.originalEvent.wheelDelta) { //判断浏览器IE,谷歌滚轮事件               
            if (wheel > 0) { //当滑轮向上滚动时  
               alert('上滚')
            }  
            if (wheel < 0) { //当滑轮向下滚动时  
                 alert('下滚')
            }  
        } else if (event.originalEvent.detail) {  //Firefox滚轮事件  
            if (detal > 0) { //当滑轮向下滚动时  
               alert('下滚')
            }  
            if (detal < 0) { //当滑轮向上滚动时  
                alert('上滚')  
            }  
        }  
    });

转载自:　js中鼠标滚轮事件

标签：滚轮,document,滚动,鼠标,detail,alert,js,event,滑轮
来源： https://blog.csdn.net/Wen1129511/article/details/121206382