当鼠标向下滚动 box1变长；
当滚轮向上滚动时，box1变短
第一步：知道滚轮有没有滚动：鼠标滚轮事件--onwheel--在滚轮滚动时候触发
onmousewheel————在火狐中不支持该属性
火狐需要使用：DOMmouseScroll来绑定滚动事件，注意该事件需要通过addEventListener（）函数进行绑定
function bind(obj, eventStr, callback) { if(obj.addEventListener){ //大部分浏览器 obj.addEventListener(eventStr, callback, false); }else{ //IE8及以下 obj.attachEvent("on"+eventStr, function(){ callback.call(obj);//this是指定的那个对象 }); } };
bind(box1,"DOMMouseScroll",function(){ alert('s'); });
两个函数进行优化：实现一个函数
window.onload = function(event) {
var box1 = document.getElementById("box1");
//当鼠标向下滚动 box1变长；
//当滚轮向上滚动时，box1变短onwheel
box1.onmousewheel=function(){
alert('s');
};
bind(box1,"DOMMouseScroll",box1.onmousewheel);
};alert(event.wheelDelta)：鼠标滚轮滚动的方向——不支持火狐
向上滚动：120
向下滚动：-120---值不看大小--只看正负
火狐是event.detail
向上滚动时：-3
向下滚动 ：+3
//当滚轮滚动时，如果浏览器有滚动条，滚动条会随之滚动
//这是浏览器默认行为 可以取消：
return false;
window.onload = function(event) {
var box1 = document.getElementById("box1");
//当鼠标向下滚动 box1变长；
//当滚轮向上滚动时，box1变短onwheel
box1.onmousewheel = function(event) {
//判断鼠标滚轮滚动的方向
//兼容火狐和其他
if (event.wheelDelta > 0 || event.detail < 0) {
//向上滚动 box1变短
box1.style.height = box1.clientHeight - 10 + "px";
} else {
//向下滚动 box1变短
box1.style.height = box1.clientHeight + 10 + "px";
}
//当滚轮滚动时，如果浏览器有滚动条，滚动条会随之滚动
//这是浏览器默认行为 可以取消：
return false;
};
bind(box1, "DOMMouseScroll", box1.onmousewheel);
};//但是火狐不成功，因为取消默认行为在火狐中使用addEventListener()方法绑定响应函数u，取消默认行为的时候不能使用return false;---需要使用event.preventDefault()取消默认行为
但是IE8不支持preventDefault
window.onload = function(event) {
var box1 = document.getElementById("box1");
//当鼠标向下滚动 box1变长；
//当滚轮向上滚动时，box1变短onwheel
box1.onmousewheel = function(event) {
//判断鼠标滚轮滚动的方向
//兼容火狐和其他
if (event.wheelDelta > 0 || event.detail < 0) {
//向上滚动 box1变短
box1.style.height = box1.clientHeight - 10 + "px";
} else {
//向下滚动 box1变短
box1.style.height = box1.clientHeight + 10 + "px";
}
//当滚轮滚动时，如果浏览器有滚动条，滚动条会随之滚动
//这是浏览器默认行为 可以取消：
event.preventDefault();
return false;
};
bind(box1, "DOMMouseScroll", box1.onmousewheel);
};所以需要加判断：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#box1 {
width: 100px;
height: 100px;
background-color: #bfa;
position: absolute;
}
</style>
<script>
function bind(obj, eventStr, callback) {
if (obj.addEventListener) {
//大部分浏览器
obj.addEventListener(eventStr, callback, false);
} else {
//IE8及以下
obj.attachEvent("on" + eventStr, function() {
callback.call(obj); //this是指定的那个对象
});
}
};
window.onload = function(event) {
var box1 = document.getElementById("box1");
//当鼠标向下滚动 box1变长；
//当滚轮向上滚动时，box1变短onwheel
box1.onmousewheel = function(event) {
//判断鼠标滚轮滚动的方向
//兼容火狐和其他
if (event.wheelDelta > 0 || event.detail < 0) {
//向上滚动 box1变短
box1.style.height = box1.clientHeight - 10 + "px";
} else {
//向下滚动 box1变短
box1.style.height = box1.clientHeight + 10 + "px";
}
//当滚轮滚动时，如果浏览器有滚动条，滚动条会随之滚动
//这是浏览器默认行为 可以取消：
event.preventDefault&&event.preventDefault();
return false;
};
bind(box1, "DOMMouseScroll", box1.onmousewheel);
};
</script>
</head>
<body style="height: 2000px;">
<div id="box1"></div>
</body>
</html>
