JavaScript系列之鼠标滚轮事件

鼠标滚轮事件

当在被绑定的对象上(如：某个div或者doucument)发生鼠标滚轮滚动时触发。

在不同的浏览器中有不同的表现形式：

一、ie/chrome下的事件 :　onmousewheel

1. 事件绑定方式：on 或者 addEventListener[attachEvent]
2. 获取滚轮事件具体信息：event.wheelDelta

     向上滚动up：120 
     向下滚动down: -120

二、firefox 下的事件: DOMMouseScroll 

1. 事件绑定方式：addEventListener
2. 获取滚轮事件具体信息：event.detail

     向上滚动up: -3
     向下滚动down: 3

/*
    封装一个函数：
    obj <object> 需要加鼠标滚轮事件的对象
    upFn <function> 当滚轮向上滚动时执行的函数
    downFn <function> 当滚轮向下滚动时执行的函数

*/

function wheel(obj,upFn,downFn) {

    if(arguments.length < 3){
        alert('Sorry,你输入的参数不够');
    }

    obj.onmousewheel = fn;  

    obj.addEventListener && obj.addEventListener('DOMMouseScroll',fn,false);

    function fn(ev){

        var ev = ev || window.event;

        var bool = true;

        if(ev.wheelDelta){
            bool = ev.wheelDelta > 0 ? true : false;
        }else if(ev.detail){
            bool = ev.detail < 0 ? true : false;
        }

        bool && upFn();
        (!bool) && downFn();

        //prevent(ev);

    }
}

都存在的问题

当页面本身就存在滚动条时就会出现异常，解决办法：阻止浏览器的默认行为

ie：returnValue = false
DOM：preventDefault()

/*
    阻止默认行为函数
*/
function prevent(evt){

    if(evt.preventDefault){
        evt.preventDefault();
    }else{
        evt.returnValue = false;
    }

}

//将wheel函数中的prevent(ev)前注释去掉即可