周末，今天阳光明媚的，周围也都呈现万物复苏的景象。坐在家里写代码着实有些浪费这大好天气。可是后来想想，没人陪一个人在外瞎逛也倒无趣。哎，孤家寡人呀。

手握鼠标，这篇文章就是说的是javascript 鼠标滚轮事件。为了这篇文章，我还在首页的轮播图放了一张自己做的关于鼠标滚轮事件的图，没有美术功底，图虽然不好看，但为了更加清晰的描述和强调本文的内容，后来还是硬着头皮放了上来。

OK，话入正题。鼠标滚轮事件是我遇到在javascript事件里面最为恶劣的一个事件，因为它充满着各种不兼容，几乎每种浏览器都有一种属于自己的滚轮属性，而且属性的值还可能是相反的。无语中…… 不过话说这个事件还是蛮实用的，所以掌握它还是有必要的。下面主要从两个方面来讲述鼠标滚轮事件：

一、事件函数

滚轮事件函数因为浏览器的不同，所以有着不同的函数。

  • IE（chrome）方式：mousewheel
  • DOM（firefox）方式：DOMMouseScroll
<script>
function addEvent(obj, sEvent, fn){
    if(obj.attachEvent){
      obj.attachEvent("on"+sEvent, fn);
    } else {
      obj.addEventListener(sEvent, fn, false);
    }
}

var oDemo=document.getElementById("demo");

addEvent(oDemo,"mousewheel",mouse);
addEvent(oDemo,"DOMMouseScroll",mouse);

function mouse( ){
    console.log("滚动！");
}
</script>

<div id="demo"></div>

二、滚轮方向

鼠标滚动方向主要有向上和向下，现在来介绍浏览器的滚轮方向的属性：

  • IE（chrome）方式：wheelDelta；向下是-120，向上是120

  • DOM（firefox）方式：detail；向下是3，向上是 -3 。

注意需要绑定事件才能使用：

<script>
function addEvent(obj, sEvent, fn){
    if(obj.attachEvent){
        obj.attachEvent("on"+sEvent, fn);
    } else {
        obj.addEventListener(sEvent, fn, false);
    }
}

var oDemo=document.getElementById("demo");

addEvent(oDemo,"mousewheel",mouse);
addEvent(oDemo,"DOMMouseScroll",mouse);

function mouse(ev){
    var oEvent=ev||event;
    //alert(oEvent.wheelDelta); // wheelDelta 上滚 120 ，下滚 -120 兼容ie , chrome
    //alert(oEvent.detail); //detail 上滚 -3， 下滚 3 兼容 firefox

    var bDown=true;

    bDown=oEvent.wheelDelta?oEvent.wheelDelta<0:oEvent.detail>0; // 先判断是否支持wheelDelta，然后再判断鼠标滚轮是往上滚，还是往下滚？ 下滚为-120 oEvent.wheelDelta<0 为真 …..
    var action=bDown?"向下":"向上";

    alert(action);

    if(oEvent.preventDefault){ // 当页面高度超过一屏时，鼠标滚动失效，变为浏览器默认滚动，所以要阻止默认行为；
        oEvent.preventDefault();
    } else {
        return false;
    }
}
</script>

<div id="demo"></div>

到此为止，鼠标滚轮事件就全部讲完了，下篇文章将要说到它的一个很酷的应用。现在出门咯。。。听说上元节有很多美丽的邂逅哦，嘿嘿！