自定义滚动条

自写

html部分

<div id="box">
    <div id="div1">
        <div id="cont">
     
        </div>
    </div>
    <div id="div2">
        <div id="bar"></div>
    </div>
</div>

JS部分

window.onload=function(){
    var oBox = document.getElementById('box');
    var oDiv1 = document.getElementById('div1');
    var oDiv2 = document.getElementById('div2');
    var oCont = document.getElementById('cont');
    var oBar = document.getElementById('bar');
    oBar.onmousedown=function(ev){
        var oEvent = ev||event;
        var disY = oEvent.clientY-oBar.offsetTop;
        document.onmousemove=function(ev){
            var oEvent = ev||event;
            var t = oEvent.clientY-disY;
            if(t<0){
                t=0;
            }else if(t>oDiv2.offsetHeight-oBar.offsetHeight){
                t=oDiv2.offsetHeight-oBar.offsetHeight;
            }
            oBar.style.top=t+'px';
            var scale = t/(oDiv2.offsetHeight-oBar.offsetHeight);
            oCont.style.top=-scale*(oCont.offsetHeight-oDiv1.offsetHeight)+'px';
        };
        document.onmouseup=function(){
            document.onmousemove=null;
            document.onmouseup=null;
            oBar.releaseCapture&&oBar.releaseCapture();
        };
        oBar.setCapture&&oBar.setCapture();
        return false;
    };
};