鼠标滑轮滚动事件

“mousewheel”是鼠标的滑轮滚动事件，因为是浏览器最基本的事件，有时候需要用它做点其他的效果，就像Fullpage.js插件那样，做一个基本的滚动，效果。

JS判断滑轮滚动方向

可以在任意DOM节点上使用mousewheel事件，在js中使用addEventListener在DOM上实现滚动监听：

document.getElementById(“sec”).addEventListener(“mousewheel”,scrollfunc);

但是有时候我们要判断滑轮是向上滚动还是向下滚动，所以我们要使用e.wheelDelta：

scrollfunc(e){
    if(e.wheelDelta>0){
        //"向上滚动"    
    }else｛
        //"向下滚动"
    ｝
}

这是简单版本，我在别人的网站上看到的是这样的：

<script>
   var scrollFunc = function (e) {
        e = e || window.event;
        if (e.wheelDelta) {  //判断浏览器IE，谷歌滑轮事件             
            if (e.wheelDelta > 0) { //当滑轮向上滚动时
                alert("滑轮向上滚动");
            }
            if (e.wheelDelta < 0) { //当滑轮向下滚动时
                alert("滑轮向下滚动");
            }
        } else if (e.detail) {  //Firefox滑轮事件
            if (e.detail> 0) { //当滑轮向上滚动时
                alert("滑轮向上滚动");
            }
            if (e.detail< 0) { //当滑轮向下滚动时
                alert("滑轮向下滚动");
            }
        }
    }
    //给页面绑定滑轮滚动事件
    if (document.addEventListener) {
        document.addEventListener('DOMMouseScroll', scrollFunc, false);
    }
    //滚动滑轮触发scrollFunc方法
    window.onmousewheel = document.onmousewheel = scrollFunc;  
</script>

这是兼容那些很古老的IE浏览器和老版本FireFox吧

JQUERY判断滑轮滚动方向

jquery其实也差不多吧：

var delta = (event.originalEvent.wheelDelta) ? event.originalEvent.wheelDelta : -(event.originalEvent.detail || 0);

注意事项

用户使用滑轮的时候，一般都不值只滑一次，所以一般一次都是滑动166px，但是一般都会滑动2+次，所以绑定的事件就会多次执行，我暂时没找到解决办法。但是有一种情况，就是事件是一个jquery动画事件，那样的话，你可以在执行动画之前来一个stop（）函数，这样就保证你的动画只会执行最后的一次。
最最重要的是别忘了在绑定的事件当中写一句：

e.preventDefault();

OVER!