码迷,mamicode.com
首页 > 其他好文 > 详细

监听鼠标滚轮事件

时间:2018-11-16 17:23:02      阅读:179      评论:0      收藏:0      [点我收藏+]

标签:hand   兼容   OLE   add   prevent   函数   使用   取反   lse   

js:

//兼容性写法,该函数也是网上别人写的,不过找不到出处了,蛮好的,所有我也没有必要修改了
//判断鼠标滚轮滚动方向
if (window.addEventListener)//FF,火狐浏览器会识别该方法
    window.addEventListener(‘DOMMouseScroll‘, wheel, false);
window.onmousewheel = document.onmousewheel = wheel;//W3C
//统一处理滚轮滚动事件
function wheel(event){
    var delta = 0;
    if (!event) event = window.event;
    if (event.wheelDelta) {//IE、chrome浏览器使用的是wheelDelta,并且值为“正负120”
        delta = event.wheelDelta/120; 
        if (window.opera) delta = -delta;//因为IE、chrome等向下滚动是负值,FF是正值,为了处理一致性,在此取反处理
    } else if (event.detail) {//FF浏览器使用的是detail,其值为“正负3”
        delta = -event.detail/3;
    }
    if (delta)
        handle(delta);
}
//上下滚动时的具体处理函数
function handle(delta) {
        if (delta <0){//向下滚动
            
        }else{//向上滚动
            
        }
    }


jQ:
$(document).on(‘mousewheel DOMMouseScroll‘, onMouseScroll);
function onMouseScroll(e){
    e.preventDefault();
    var wheel = e.originalEvent.wheelDelta || -e.originalEvent.detail;
    var delta = Math.max(-1, Math.min(1, wheel) );
    if(delta<0){//向下滚动
        console.log(‘向下滚动‘);
    }else{//向上滚动
        console.log(‘向上滚动‘);
    }    
}

监听鼠标滚轮事件

标签:hand   兼容   OLE   add   prevent   函数   使用   取反   lse   

原文地址:https://www.cnblogs.com/tuhazi/p/9969871.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!