鼠标滚轮事宜

当在被绑定的对象上(如：某个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)前解释去掉即可