js监听鼠标的滚轮滚动事件

171 阅读 0 评论 113 点赞

我是靠谱客的博主冷艳铃铛，这篇文章主要介绍js监听鼠标的滚轮滚动事件，现在分享给大家，希望可以做个参考。

不同的浏览器有不同的滚轮事件。主要是有两种，onmousewheel（firefox不支持）和DOMMouseScroll（只有firefox支持），关于这两个事件这里不做详述，想要了解的朋友请移步：鼠标滚轮(mousewheel)和DOMMouseScroll事件。

具体实现：1. 需要添加事件监听，代码如下：兼容firefox采用addEventListener监听

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
windowAddMouseWheel();
function windowAddMouseWheel() {
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) { //火狐使用DOMMouseScroll绑定
document.addEventListener('DOMMouseScroll', scrollFunc, false);
}
//其他浏览器直接绑定滚动事件
window.onmousewheel = document.onmousewheel = scrollFunc;
}

判断滚轮向上或向下在浏览器中也要考虑兼容性，现在五大浏览器（IE、Opera、Safari、Firefox、Chrome）中Firefox 使用detail，其余四类使用wheelDelta；两者只在取值上不一致，代表含义一致，detail与wheelDelta只各取两个值，detail只取±3，wheelDelta只取±150，其中正数表示为向下，负数表示向上