js模拟滚动条

<div id="contentBox">
<div id="content">
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
<p>9</p>
</div>
</div>
<div id="scrollBar">
<div id="scroll"></div>
</div>

#contentBox{
width: 100px;
height: 100px;
border:1px solid darkgray;
overflow: hidden;
position: relative;
}
#content{
position: absolute;
left: 0;
top: 0;
}

#scrollBar {
position: relative;
width: 200px;
height: 30px;
background: grey;
}
#scroll{
position: absolute;
width: 30px;
height: 30px;
background: red;
}

*{
margin: 0;
padding: 0;
}

var scroll=document.getElementById('scroll');
var scrollBar=document.getElementById('scrollBar');
var content=document.getElementById('content');
var contentBox=document.getElementById('contentBox');
var toppos=content.offsetHeight-contentBox.offsetHeight;

scroll.onmousedown= function (e) {
var e= e||window.event;
var disX= e.clientX-scroll.offsetLeft;
document.onmousemove= function (e) {
var e= e || window.event;
var left=e.clientX-disX;
if(left<0){
left=0;
}else if(left>(scrollBar.offsetWidth-scroll.offsetWidth)){
left=scrollBar.offsetWidth-scroll.offsetWidth;
}
var scale=left/(scrollBar.offsetWidth-scroll.offsetWidth);
content.style.top=-scale*toppos+'px';
scroll.style.left= left+'px';
}
document.onmouseup= function () {
document.onmousemove=null;
document.onmouseup=null;
}
}
//top 是一个自带的全局变量，表示window