js中判断鼠标滚轮方向的方法

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

前言
LiuDaP
最近无聊，在做自己的个人站，其中用到了一个关于鼠标滚轮方向判断的方法，今天闲来无聊，就给大家介绍一下吧！！！！

在介绍鼠标事件案例前，让我们先稍微了解一下js中的event对象

一、JS中的Event对象

Event对象：它代表的是事件的状态，例如可以表示鼠标的位置、鼠标按钮的状态、键盘按键的状态等等。

>>>事件通常与函数结合使用，函数不会在事件发生前被执行！

二、JS中如何判断鼠标滚轮方向

判断鼠标滚轮的方向，有着两个派别：一是谷歌、IE派别（这次IE没有搞特殊）；二是火狐派别

>>>在谷歌、IE派别中，给我们提供了onmousewheel方法，该方法给我们提过了一个wheelDelta属性，该属性的返回值：正值与负值，其中正值表示滚轮向上滚动；负值表示滚轮向下滚动。

>>>而在火狐中，给我们提供了DOMMouseScroll方法，该方法给我们提供了一个detail属性，该属性的返回值：正值与负值，其中正值表示滚轮向下滚动；负值表示滚轮向上滚动。

>>>要注意的一点是：wheelDelta属性和detail属性的返回值都是正值与负值，但是两者表示滚轮的方向正好相反。。。

1 var scrollMouse=function(e){
2 e=e || window.event;
3 if(e.wheelDelta){ //判断浏览器IE，谷歌滑轮事件
4 if(e.wheelDelta>0){ //当滑轮向上滚动时
5 alert("滑轮向上滚动");
6 }
7 if(e.wheelDelta<0){ //当滑轮向下滚动时
8 alert("滑轮向下滚动");
9 }
10 }else if(e.detail){ //Firefox滑轮事件
11 if(e.detail>0){ //当滑轮向下滚动时
12 alert("滑轮向下滚动");
13 }
14 if(e.detail<0){ //当滑轮向上滚动时
15 alert("滑轮向上滚动");
16 }
17 }
18 }
19 //给页面绑定滑轮滚动事件
20 if(document.addEventListener){//firefox
21 document.addEventListener("DOMMouseScroll", scrollFunc, false);
22 }
23 //滚动滑轮触发scrollFunc方法 //ie 谷歌
24 window.onmousewheel=scrollMouse;