关于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> <!--<script type="text/javascript" src="jquery-1.6.min.js"> </script>--> </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>
<!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>