小编给大家分享一下javascript滚轮事件的示例分析，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！
创新互联建站-企业级云服务器提供商,为用户提供云服务器、CDN、云安全服务、成都服务器托管、服务器租用、高防主机等全方位云服务与各行业解决方案,帮助企业及个人极速备案，轻松上云，安全无忧。
具体内容如下
#box1{
width: 100px;
height: 100px;
background-color: red;
}
window.onload = function(){
//使div可以跟随鼠标滚轮滚动来改变高度
//滚轮向下滚，div变高 滚轮向上滚 div变短
//获取box1
var box1 = document.getElementById("box1");
/*
* onmousewheel
* - 鼠标滚轮滚动的事件，但是该事件火狐浏览器并不支持
* - 在火狐中需要使用DOMMouseScroll，这个事件只能通过addEventListener()来绑定
*/
//为box1绑定一个鼠标滚轮滚动的事件
box1.onmousewheel = function(event){
event = event || window.event;
//判断滚轮滚动的方向
/*
* wheelDelta
* - 事件对象中的属性，可以用来判断鼠标滚轮滚动的方向
* - 向下滚 -120 向上滚 +120
* - 该属性的值并不重要，重要的是值的符号，需要通过符号来判断滚动的方向
* - 但是该属性火狐浏览器并不支持
*/
//alert(event.wheelDelta);
/*
* 火狐中通过detail来判断方向
* - 向上滚 -3 向下滚 +3
*/
//alert(event.detail);
if(event.wheelDelta < 0 || event.detail > 0){
//向下滚
//增加box1的高度
box1.style.height = box1.offsetHeight + 10 + "px";
}else{
//向上滚
//减小box1的高度
box1.style.height = box1.offsetHeight - 10 + "px";
}
/*
* 使用addEventListener()绑定的事件，不能通过return false来取消默认行为
* 需要调用事件对象 preventDefault()方法来取消默认行为
* 但是在IE8中没有该方法
*/
event.preventDefault && event.preventDefault();
//当页面中有滚动条时，由于滚轮滚动的默认行为会导致页面整体下移
//取消默认行为
return false;
};
bind(box1 , "DOMMouseScroll" , box1.onmousewheel);
};
function bind(obj , eventStr , callback){
if(obj.addEventListener){
//如果是正常浏览器
obj.addEventListener(eventStr , callback , false);
}else{
//IE8
obj.attachEvent("on"+eventStr , function(){
callback.call(obj);
});
}
}
