//在chrome 和IE下的鼠标滚轮事件:onmousewheel
//在FF下得用DOMMouseScroll 事件，这个事件还是得用事件绑定的方才可以。先来看一个例子,自定义滚动条:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>自定义滚动条</title>
<style>
#box{width:300px;margin:300px auto;position:relative;height:300px;
overflow:hidden;padding:3px;padding-right:10px;}
#parent{width:12px;position:absolute;right:0;top:0;border-radius:6px;padding:1px;
background:#ccc;height:300px;}
#main{width:300px;position:absolute;top:0px;}
#slider{width: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>
浙公网安备 33010602011771号