案例背景
通过鼠标滚轮滚动，放大缩小容器（上滚变短，下滚变长）。
案例代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>滚轮事件</title>
</head>
<body>
<div id="box1"></div>
</body>
<script>
window.onload = function(){
//获取div
var box1 = document.getElementById("box1");
// 为div绑定鼠标滚轮事件
/**
* onmousewheel鼠标滚轮事件，会在滚轮滚动时触发
* *但是火狐不支持该属性
* *在火狐中需要使用DOMMouseScroll 来绑定滚动事件
* *并且该事件需要通过addEventListener() 函数来绑定
*/
box1.onmousewheel = function(event){
event = event || window.event;
/**
* event.wheelDelta 可以获取鼠标滚轮事件的方向
* 向上滚 120 向下滚 -120
* wheelDelta这个值我们不看大小，只看正负
*
* wheelDelta火狐不支持
* 在火狐中使用event.detail来获取滚动方向
* 向上滚 -3 向下滚 3
*/
// 判断鼠标滚动方向
if(event.wheelDelta > 0 || event.detail < 0){
// 滚轮向上滚 box1变短
// clientHeight属性表示容器可见高度
box1.style.height = box1.clientHeight - 10 + "px";
}else{
// 滚轮向下滚 box1变长
box1.style.height = box1.clientHeight + 10 + "px";
}
/**
* 使用addEventListener()方法绑定响应函数，取消默认行为是不能使用return false
* 需要使用event来取消 event.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{
/**
* this是有谁调用方法决定
* callback.call(obj)
*/
// IE8以下
obj.attachEvent("on"+eventStr , function(){
// 在匿名函数中调用回调函数
callback.call(obj);
})
}
}
}
</script>
<style>
#box1 {
background-color: red;
6.25rem;
height: 6.25rem;
}
</style>
</html>