//在chrome 和IE下的鼠标滚轮事件:onmousewheel //在FF下得用DOMMouseScroll 事件，这个事件还是得用事件绑定的方才可以。先来看一个例子,自定义滚动条: <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>自定义滚动条</title> <style> #box{300px;margin:300px auto;position:relative;height:300px; overflow:hidden;padding:3px;padding-right:10px;} #parent{12px;position:absolute;right:0;top:0;border-radius:6px;padding:1px; background:#ccc;height:300px;} #main{300px;position:absolute;top:0px;} #slider{12px;height:20px;background:#acc894;position:absolute;top:0;border-radius:4px;} </style> <script type="text/javascript"> window.onload = function(){ var oBox = $("box"); var oContent = $("content"); var oParent = $("parent"); var oSlider = $("slider"); var main = $("main"); var num = 6; var max = oParent.offsetHeight - oSlider.offsetHeight; var doc = document; drag(oSlider);
bindEvent(box,"DOMMouseScroll",mousewheel); bindEvent(box,"mousewheel",mousewheel);
function mousewheel(ev){ var ev = ev || window.event; var bDown = false;//判断是向上滚动还是向下滚动ev.wheelDalta > 0 向上，而 ev.detail > 0 则是向下，两者刚好相反。 bDown = ev.wheelDelta ? ev.wheelDelta < 0 : ev.detail > 0; var scale = (oSlider.offsetTop / max).toFixed(2); var t = oSlider.offsetTop; if(bDown) { if(t > oParent.offsetHeight - oSlider.offsetHeight - num){ t = oParent.offsetHeight - oSlider.offsetHeight - num; } oSlider.style.top = t + num + "px"; } else{ if(t < num){ t = num; } oSlider.style.top = ( t - num ) + "px"; } main.style.top = - (main.offsetHeight - box.offsetHeight) * scale + "px"; if(ev.preventDefault){ ev.preventDefault();//FF下阻止默认行为，就是阻止页面的默认的滚动条滚动 } else{ return false;//IE，Chrome 下阻止默认行为。 } } function $(id){ return document.getElementById(id); }
//一个简单的拖拽程序 function drag(obj){ obj.onmousedown = function(e){ var e = window.event || e; var disY = e.clientY - this.offsetTop; var height = parseInt(oParent.offsetHeight); doc.onmousemove = function(e){ var e = window.event || e; var top = e.clientY - disY; if(top < 0) top = 0; else if(top > height - oSlider.offsetHeight){ top = height - oSlider.offsetHeight; } var scale = (oSlider.offsetTop / max).toFixed(2); // 这个scale 得到的是一个0-1之间的数，是一个比例。然后用在拖拽的同时，控制层的top值。 main.style.top = - (main.offsetHeight - box.offsetHeight) * scale + "px"; obj.style.top = top + "px"; } doc.onmouseup = function(){ doc.onmouseup = null; doc.onmousemove = null; } return false;// 阻止默认事件。 } } function bindEvent(obj, ev, fn){ if(obj.addEventListener){ obj.addEventListener(ev, fn, false); }else{ obj.attachEvent('on'+ev, fn) } } }; </script> </head> <body> <div id="box"> <div id="content"> <div id="main"> 旋即又有些不服气的道：“谁让那些家伙在我面前骂爹是废物…” 说着话时，林动摸了摸依旧犯疼的胸口，不由得恨恨的咬了咬牙，本来今rì是林家中的一个测试，而他也是去小测了下，因为才开始修炼了半年多时间的缘故，所以成绩倒也只能说一般，而对于这个，他也没太往心里去，给他相同的修炼时间与条件，他相信自己不会比别人弱到哪里去。说着话时，林动摸了摸依旧犯疼的胸口，不由得恨恨的咬了咬牙，本来今rì是林家中的一个测试，而他也是去小测了下，因为才开始修炼了半年多时间的缘故，所以成绩倒也只能说一般，而对于这个，他也没太往心里去，给他相同的修炼时间与条件，他相信自己不会比别人弱到哪里去。 而在测试结束，林动正准备打道回府时，却是遇见了几个平rì关系并不好的家伙，原本他是不想理会，但却忍不住对方的故意挑衅，愤怒之余，年少的林动自然是忍不住的出手，而结果也很明显，他直接被胖揍了一顿，还被打昏了过去… “林山，你给我记住了，下次不把你打成猪头，我就不信林！” 林动磨了磨牙，那林山便是此事的作俑者，也是林动现在心中的头号敌 劣的缘故，那林山也是经常的找林动麻烦，而这一次，也是其中之一。 劣的缘故，那林山也是经常的找林动麻烦，而这一次，也是其中之一。 人，因为双方父亲彼此关系极为恶劣的缘故，那林山也是经常的找林动麻烦，而这一次，也是其中之一。 </div> </div> <div id="parent"> <div id="slider"></div> </div> </div> </body> </html>