标签：滚轮 document 滚动 鼠标 detail alert js event 滑轮

一、原生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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。