javascript鼠标滚动事件详解及应用

鼠标滚轮事件也是一种重要的鼠标事件，但是与onmouseover，onmousemove等事件不同的是，在使用鼠标滚轮事件时需要考虑浏览器的兼容性问题。

 

浏览器兼容性差别

在IE和chrome浏览器中，鼠标滚轮事件是通过onmousewheel来实现的。通过event.wheelDelta值来记录鼠标滚轮滚动的信息，值为正负120，正值代表向上滚动，负值代表向下滚动。

在firefox浏览器下，支持DOMMouseScroll事件来实现鼠标滚轮滚动。通过event.detail值来记录鼠标滚轮滚定的信息，值为正负3，正值代表向下滚动，赋值代表向上滚动，与IE和Chrome不同 。
 

解决浏览器兼容性问题的方法

其实在前端开发的过程中，包括js事件，css样式都会遇到浏览器兼容性不一致的问题。这里有一种比较常用的解决不兼容问题的方法：自己封装事件，在自己的事件中加上浏览器判断语句。根据结果选择合适的方法。

这里封装一个，判断浏览器的事件addEvent：

function addEvent(obj,xEvent,fn) { //obj代表HTML元素，xEvent代表事件
    if(obj.attachEvent){
      obj.attachEvent('on'+xEvent,fn);
    }else{
      obj.addEventListener(xEvent,fn,false);
    }
}

判断浏览器类型的原理：由于attachEvent用于非Mozilla系列，addEventListener用于Mozilla系列。（Mozilla系列在浏览器而言，即指火狐浏览器，本人认为也可以指支持w3c标准的系列浏览器）因此可以通过obj.attachEvent的返回值来判断所用浏览器的类型。

给鼠标滚轮的滚动事件添加动作

 

主要有四个方向要考虑：

1.解决浏览器兼容问题

2.定义标志位，统一并标志鼠标滚轮是向上还是向下滚动。

3.添加鼠标滚动时的具体动作

4.阻止浏览器默认的响应鼠标滚动的行为。

window.onload = function () {
        var oDiv = document.getElementById('div1');

        function onMouseWheel(ev) {/*当鼠标滚轮事件发生时，执行一些操作*/
            var ev = ev || window.event;
            var down = true; // 定义一个标志，当滚轮向下滚时，执行一些操作
                down = ev.wheelDelta?ev.wheelDelta<0:ev.detail>0;
            if(down){
                oDiv.style.height = oDiv.offsetHeight+10+'px';
            }else{
                oDiv.style.height = oDiv.offsetHeight-10+'px';
            }
            if(ev.preventDefault){/*FF 和 Chrome*/
                ev.preventDefault();// 阻止默认事件
            }
            return false;
        }
        addEvent(oDiv,'mousewheel',onMouseWheel);
        addEvent(oDiv,'DOMMouseScroll',onMouseWheel);
     }
    function addEvent(obj,xEvent,fn) {
        if(obj.attachEvent){
            obj.attachEvent('on'+xEvent,fn);
        }else{
            obj.addEventListener(xEvent,fn,false);
        }
    }