html鼠标滑轮事件,js鼠标滚轮上下滚动监听事件应用实例（跨浏览器，亲测）

最近做项目涉及到多个DIV切换效果，包括普通按钮点击切换和鼠标滚轮上下滚动切换等；其主要涉及到的内容就是鼠标滚轮上下切换的事件监听，在此记录一下；也希望能帮到各位有需要的朋友。

以下为项目实例：

$(function() {

var count = $("#sysCount").val();

var isUp = false;

// 初始化子系统模块

if (count > 6) {

$("#panel").css("width", "1200px");

$(".line2").css("width", "550px");

$(".hoverBtn").css("display", "block");

for ( var i = 6; i 

$("#sys" + i).css("display", "none");

}

$("#lastBtn").hover(function() {

if (start != 0) {

$(this).toggleClass("hoverBtnTog");

}

});

$("#nextBtn").hover(function() {

if (count - start != 6) {

$(this).toggleClass("hoverBtnTog");

}

});

//鼠标滚轮事件

var isFirefox = navigator.userAgent.indexOf("Firefox") != -1;

//Firefox事件：DOMMouseScroll、IE/Opera/Chrome事件：mousewheel

var mousewheel = isFirefox ? "DOMMouseScroll" : "mousewheel";

//鼠标滚动事件

var scrollFunc = function(e) {

e = e || window.event;

//当鼠标在子系统区域内时：屏蔽窗口滚轮-滚动滚动条事件；

//此时才调用子系统滚动方法

if(isUp){

e = e || window.event;

if (e.stopPropagation) e.stopPropagation();

else e.cancelBubble = true;

if (e.preventDefault) e.preventDefault();

else e.returnValue = false;

if(isFirefox){

if (e.detail == -3) {

// 向上滚动

getLast();

} else {

// 向下滚动

getNext();

}

}else{

if (e.wheelDelta == 120) {

// 向上滚动

getLast();

} else {

// 向上滚动

getNext();

}

}

}

};

try{

document.addEventListener(mousewheel, scrollFunc, false);

}catch(err){

window.onmousewheel=document.onmousewheel=scrollFunc;

}

$("#hor").mouseover(function(){

isUp = true;

});

$("#hor").mouseleave(function(){

isUp = false;

});

}

});