Mouse Wheel Programming In JavaScript

在JS编程当中经常会用到鼠标滚轮事件,但是要实现这个效果不得不考虑兼容情况

存在的兼容性问题:

  1. 事件对象兼容,IE是window.event,而FF只需要传个参数(event)就行
  2. 滚轮事件:IE/Chrome 使用onmousewheel,而FF就独树一帜,使用DOMMouseScroll
  3. 获取滚轮的值:IE/Chrome使用onmousewheel的事件对象event的wheelDelta,而FF采用的是detail
  4. IE/Chrome向上滚动为120,向下滚动为-120;FF向上滚动为-3,向下滚动为3

贴码:

var oDelta=document.getElementById('Delta');
var num=0;
function mouseScroll(e){
    //事件对象兼容
    var e=e||window.event;
    var down=null;
    if(e.wheelDelta){
        down=e.wheelDelta;//IE,Chrome
    }else{
        down=-e.detail;//FF,注意负号
    }
    counter(down);
}

//添加事件
if(document.addEventListener){document.addEventListener("DOMMouseScroll",mouseScroll,false);}//FF
document.onmousewheel=mouseScroll;//IE/Chrome

//计数
function counter(count){
    if(count>0){
        oDelta.value=num++;
    }else if(count<0){
        oDelta.value=num--;
    }
}

注:至于其他浏览器:如Opera,Safari.本人没有测试,查资料(传送门)得知,和IE/Chrome一样,只有FF独特

    原文作者:gssify
    原文地址: https://segmentfault.com/a/1190000000495551
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞