自定义滚动条

自写

html部分

 1 <div id="box">
 2     <div id="div1">
 3         <div id="cont">
 4      
 5         </div>
 6     </div>
 7     <div id="div2">
 8         <div id="bar"></div>
 9     </div>
10 </div>

JS部分

 1 window.onload=function(){
 2     var oBox = document.getElementById('box');
 3     var oDiv1 = document.getElementById('div1');
 4     var oDiv2 = document.getElementById('div2');
 5     var oCont = document.getElementById('cont');
 6     var oBar = document.getElementById('bar');
 7     oBar.onmousedown=function(ev){
 8         var oEvent = ev||event;
 9         var disY = oEvent.clientY-oBar.offsetTop;
10         document.onmousemove=function(ev){
11             var oEvent = ev||event;
12             var t = oEvent.clientY-disY;
13             if(t<0){
14                 t=0;
15             }else if(t>oDiv2.offsetHeight-oBar.offsetHeight){
16                 t=oDiv2.offsetHeight-oBar.offsetHeight;
17             }
18             oBar.style.top=t+'px';
19             var scale = t/(oDiv2.offsetHeight-oBar.offsetHeight);
20             oCont.style.top=-scale*(oCont.offsetHeight-oDiv1.offsetHeight)+'px';
21         };
22         document.onmouseup=function(){
23             document.onmousemove=null;
24             document.onmouseup=null;
25             oBar.releaseCapture&&oBar.releaseCapture();
26         };
27         oBar.setCapture&&oBar.setCapture();
28         return false;
29     };
30 };