关于onmousewheel的问题.好纠结啊

我想每次鼠标轮滚的时候就加1.返回就减1;
要是连续快速滚轮的话,e.wheelDelta是240..
这个问题怎么解决啊?
<!doctype html>
<html>
<head>
<style type="text/css">
*{padding:0;margin:0;}
.fl{float:left;display:inline;}
.fr{float:right;display:inline;}
#wrap{width:300px;margin:55px auto;height:125px;position:relative;overflow:hidden;float:left}
#list{position:absolute;top:0;left:0;}
#slider{width:8px;height:125px;background:#ccc;float:left;margin-top:55px;position:relative}
#sliderbtn{position:absolute;top:0;left:0;height:30px;width:8px;background:orange}
</style>

</head> <body> <div id="wrap">
<ul id="list">
<li><a href="">Windows 8 让开发者蛋疼的十个原因</a></li>
<li><a href="">Windows 8 让开发者蛋疼的十个原因</a></li>
<li><a href="">Windows 8 让开发者蛋疼的十个原因</a></li>
<li><a href="">Windows 8 让开发者蛋疼的十个原因</a></li>
<li><a href="">Windows 8 让开发者蛋疼的十个原因</a></li>
<li><a href="">Windows 8 让开发者蛋疼的十个原因</a></li>
<li><a href="">Windows 8 让开发者蛋疼的十个原因</a></li>
<li><a href="">Windows 8 让开发者蛋疼的十个原因</a></li>
<li><a href="">Windows 8 让开发者蛋疼的十个原因</a></li>
<li><a href="">Windows 8 让开发者蛋疼的十个原因</a></li>
<li><a href="">Windows 8 让开发者蛋疼的十个原因</a></li>
<li><a href="">Windows 8 让开发者蛋疼的十个原因</a></li>
<li><a href="">Windows 8 让开发者蛋疼的十个原因</a></li>
</ul>
</div>
<div id="slider">
<div id="sliderbtn">
</div>
</div>
<script type="text/javascript">
var $ = function(id){return document.getElementById(id)}
var obj = {
addEvent:function(e){
return e || window.event;
},
eventHandler:function(elem,type,func){
if(elem.addEventListener){
elem.addEventListener(type,func,false)
}else if(elem.attachEvent){
elem.attachEvent("on"+type,func)
}else{
elem["on"+type] = func;
}
},
removeHandler:function(elem,type,func){
if(elem.removeEventListener){
elem.removeEventListener(type,func,false)
}else if(elem.detachEvent){
elem.detachEvent("on"+type,func)
}else{
elem["on"+type] = null;
}
}
}
var sliderbtn = $("sliderbtn");
var slider = $("slider");
var wrap = $("wrap");
var list = $("list");
var listTar = list.offsetHeight - wrap.offsetHeight;
var sliderTar = slider.offsetHeight - sliderbtn.offsetHeight;
var result = listTar / sliderTar;
obj.eventHandler(sliderbtn,"mousedown",aa)
function aa(e){
e = obj.addEvent(e);
posY = e.clientY - this.offsetTop;
if(e.preventDefault){
e.preventDefault()
}
obj.eventHandler(document,"mousemove",bb)
obj.eventHandler(document,"mouseup",function(){
obj.removeHandler(document,"mousemove",bb);
})
} function bb(e){
var e = obj.addEvent(e);
var tar = e.clientY - posY;

sliderbtn.style.top = tar +"px";
list.style.top = tar * -result +"px";
if(tar < 0){
sliderbtn.style.top = "0px";
list.style.top = "0px";
}
if(tar > sliderTar){
list.style.top = -listTar +"px";
sliderbtn.style.top = sliderTar+"px";
}
}
obj.eventHandler(list,"mousewheel",function(e){
e = obj.addEvent(e);
//alert(e.wheelDelta)
if(e.wheelDelta < 0){
h = e.wheelDelta - -119;
console.log(e.wheelDelta+"d")
}else{
h = e.wheelDelta - 119;
console.log(e.wheelDelta)
}
this.style.top = (this.offsetTop + h) +"px";
console.log(this.offsetTop + h)
})

</script>
</body>
</html>

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

window 8?没用过，你的代码在xp下的各种浏览器都没反应，你自己弄的滚动条很有问题。
还有在我的测试中，mousewheel这个事件没有bug，你自己的代码问题吧？
下面是我的测试代码：<!doctype html>
<html>
    <head>
     <meta charset="utf-8"/>
        <style>
         div{
         margin: 10px;
         }
        </style>
    </head>

    <body>
<div>
<label for="wheelDelta"> 滚动值:(Not Firefox)</label>
<input type="text" id="wheelDelta" />
</div>
<div>
<label for="detail"> 滚动值:(Firefox)</label>
<input type="text" id="detail" />
</div>
<script type="text/javascript">
var t1 = document.getElementById("wheelDelta"),
t2 = document.getElementById("detail"),
scrollFunc = function(e){
e = e || window.event;
if(e.wheelDelta){//IE/Opera/Chrome
t1.value = e.wheelDelta;
}else if(e.detail){//Firefox
t2.value = e.detail;
}
}
/*注册事件*/
if(!('event' in window)){ //firefox
document.addEventListener('DOMMouseScroll',scrollFunc,false);
}else if(document.addEventListener){ //chrome, safari..
document.addEventListener('mousewheel',scrollFunc,false);
}else{ // ie
document.attachEvent('onmousewheel',scrollFunc);
}
</script>
    </body>
    </html>