自定义滚动条

<label for="">横滚动条:<input type="text" id="text1" /></label>
<label for="">竖滚动条:<input type="text" id="text2" /></label>
<div id="div1">
<div id="div2"></div>
</div>
<div id="div3">
<div id="div4"></div>
</div>

*{margin:0;padding:0;}
#div1{width:500px;height: 30px;position: relative;margin:10px auto;background: #eeeeee;}
#div2{width:30px;height: 30px;position: absolute;left: 0;top:0;background: red;}
#div2:hover{background: orangered;}
#div3{width:30px;height: 500px;position: relative;left:290px;top:-39px;background: #eeeeee;}
#div4{width:30px;height: 30px;position: absolute;left: 0;top:0;background: red;}
#div4:hover{background: orangered;}

window.onload = function ()
{
var oDiv1 = document.getElementById('div1');
var oDiv2 = document.getElementById('div2');
var oDiv3 = document.getElementById('div3');
var oDiv4 = document.getElementById('div4');
var oText1 = document.getElementById('text1');
var oText2 = document.getElementById('text2');
oDiv2.onmousedown = function (ev)
{
scroll(this,oDiv1,ev, function (scale) {
oText1.value = scale;
});
return false;
};
oDiv4.onmousedown = function (ev)
{
scroll(this,oDiv3,ev, function (scale) {
oText2.value = scale;
});
return false;
}
};
//滚动条函数,最后一个fun函数是为了获取滚动条的滑动系数
function scroll(objSlid,objParent,ev,fun)//这个ev是obj的鼠标事件
{
var pos = getPos(ev);
var disX = pos.x - objSlid.offsetLeft;
var disY = pos.y - objSlid.offsetTop;
document.onmousemove = function (ev) //这个ev是document的鼠标事件
{
var pos = getPos(ev);   //获取鼠标位置
var l = pos.x - disX;   //(l,t)是元素左上角的坐标
var t = pos.y - disY;

//不让元素移出父级
if(l<0)
l = 0;
else if(l > objParent.offsetWidth - objSlid.offsetWidth)
l = objParent.offsetWidth - objSlid.offsetWidth;
if(t<0)
t = 0;
else if(t > objParent.offsetHeight - objSlid.offsetHeight)
t = objParent.offsetHeight - objSlid.offsetHeight;
//移动元素
objSlid.style.left = l + 'px';
objSlid.style.top = t + 'px';
var  scale = 0;
if(objSlid.offsetHeight == objParent.offsetHeight)  //横滚动条
scale = (1/(objParent.offsetWidth - objSlid.offsetWidth))*l;
else                                                //竖滚动条
scale = (1/(objParent.offsetHeight - objSlid.offsetHeight))*t;
if(fun) fun(scale);  //把滑动系数传进去
};
document.onmouseup = function ()
{
document.onmousemove = null;   //停止移动
document.onmouseup = null;     //不需要的函数赋值为null
if(objSlid.releaseCapture)    //解锁
objSlid.releaseCapture();
};
if(objSlid.setCapture)     //让所有的事件响应都锁定到obj上
objSlid.setCapture();
}
//获取位置
function getPos(ev)
{
var oEvent = ev||event;  //兼容事件
//如果有滑动条的话，要加上滑了的位置,因为oEvent.clientX是可视区的坐标.
var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;
var scrollLeft = document.documentElement.scrollLeft||document.body.scrollLeft;
return {x:oEvent.clientX + scrollLeft,y:oEvent.clientY + scrollTop};//返回一个JSON数组
}