您的位置：首页 > Web前端 > JavaScript

JS 鼠标滚轮事件（mousewheel/DOMMouseScroll）

2016-01-02 23:08 991 查看

onmousewheel （FireFox不支持此事件）

// IE/Opera/Chrome/Safari
document.body.onmousewheel = function(event) {
event = event || window.event;
console.dir(event);
};

DOMMouseScroll[b]（FireFox独有事件）[/b]

// Firefox
document.body.addEventListener("DOMMouseScroll", function(event) {
console.dir(event);
});

js返回数值判断滚轮上下

Firefox 使用detail，只取 ±3．

五大浏览器（IE、Opera、Safari、Firefox、Chrome）使用wheelDelta，只取 ±120．

其中正数表示为向上，负数表示向下．

Example

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Test wheel event</title>
</head>
<body style="height:2000px;">
<script type="text/javascript">
var scrollFunc = function(event){
event = event || window.event;
if(event.wheelDelta){ // IE/Opera/Chrome/Safari
t1 = event.wheelDelta;
console.log(t1);
}else if(event.detail){ // Firefox
t2 = event.detail;
console.log(t2);
}
}
/*注册事件*/
if(document.addEventListener){
// firefox
document.body.addEventListener("DOMMouseScroll",scrollFunc,false);
}
document.body.onmousewheel = scrollFunc; // IE/Opera/Chrome/Safari
</script>
</body>
</html>