封装自定义滚动条
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>自定义滚动条</title>
<style>
*{margin:0;padding:0;list-style:none;}
#div1{width:1000px;height:500px;border:1px solid #666;margin:0 auto;margin-top:20px;}
#div2{float:left;width:970px;height:498px;border:1px solid #666;overflow: hidden;}
#div2 ul{width:970px;height:600px;position:relative;background:red;}
#div3{float:left;width:26px;height: 498px;border: 1px solid #666;position:relative;}
#div4{width: 26px;height:50px;background:#ccc;position:absolute;left:0;top:0}
</style>
<script src="addMouseWheel2.js" type="text/javascript"></script>
<script>
window.onload=function(){
var oWarp=document.getElementById('div1');
var oBar=document.getElementById('div4');
var oBarParent=document.getElementById('div3');
var oDiv2=document.getElementById('div2');
var oUl=oDiv2.getElementsByTagName('ul')[0];
oBar.onmousedown=function(ev){
var oEvt=ev||event;
var disY=oEvt.clientY-oBar.offsetTop;
document.onmousemove=function(ev){
var oEvt=ev||event;
var l=oEvt.clientY-disY;
//限定
setContentPos(l)
};
document.onmouseup=function(){
document.onmousemove=null;
document.onmouseup=null;
};
return false;
};
function setContentPos(l){
if(l<0) l=0;
if(l>oBarParent.offsetHeight-oBar.offsetHeight)
l=oBarParent.offsetHeight-oBar.offsetHeight-2;
oBar.style.top=l+'px';
var scale=oBar.offsetTop/(oBarParent.offsetHeight-oBar.offsetHeight);
oUl.style.top=scale*(oDiv2.offsetHeight-oUl.offsetHeight)+'px';
};
addMouseWheel(oDiv2,function(down){
var l=oBar.offsetTop;
if (down) {
l+=10;
}else{
l-=10;
}
setContentPos(l)
});
};
</script>
</head>
<body>
<div id="div1">
<div id="div2">
<ul>
<li>11111111111111111</li>
<li>11111111111111111</li>
<li>11111111111111111</li>
<li>11111111111111111</li>
<li>11111111111111111</li>
<li>11111111111111111</li>
<li>11111111111111111</li>
<li>11111111111111111</li>
<li>11111111111111111</li>
<li>11111111111111111</li>
<li>11111111111111111</li>
<li>11111111111111111</li>
<li>11111111111111111</li>
<li>11111111111111111</li>
<li>11111111111111111</li>
<li>11111111111111111</li>
<li>11111111111111111</li>
<li>11111111111111111</li>
<li>11111111111111111</li>
<li>11111111111111111</li>
<li>11111111111111111</li>
<li>11111111111111111</li>
<li>11111111111111111</li>
<li>11111111111111111</li>
<li>11111111111111111</li>
<li>11111111111111111</li>
<li>11111111111111111</li>
<li>11111111111111111</li>
</ul>
</div>
<div id="div3">
<div id="div4"></div>
</div>
</div>
</body>
</html>
addMouseWheel2.js
function addMouseWheel(obj,fn){
//1.判断浏览器
if(navigator.userAgent.toLowerCase().indexOf('firefox') != -1){
//ff
obj.addEventListener('DOMMouseScroll', fnWheel,false);
}else{
//other
obj.onmousewheel=fnWheel;
}
//2.确定方向
function fnWheel(ev){
var oEvt=ev||event;
if(oEvt.wheelDelta){
//ie chrome
var down=oEvt.wheelDelta<0?true:false;
}else{
//ff
var down=oEvt.detail>0?true:false;
}
//3.回调传参
fn(down);
//4.阻止默认
oEvt.preventDefault && oEvt.preventDefault();
return false;
}
}
效果示例如下: