自定义滚动条

<style>
#bar {height:600px; width:20px; background:#CCC; position:absolute;right:10px;}
#btn {width:20px; height:20px; background:red; position:absolute; left:0; top:0;}
#warp {width:800px; height:300px; border:1px solid black; overflow:hidden; position:relative;margin:0 auto;}
#cont {position:absolute; left:0; top:0; padding:4px;}
</style>

<div id="bar">
    <div id="btn"></div>
</div>
<div id="warp">
    <div id="cont">
    </div>
</div>

<script>
window.onload = function ()
{
    var oBar = document.getElementById('bar');
    var oBtn = document.getElementById('btn');
    var oWarp = document.getElementById('warp');
    var oCont = document.getElementById('cont');

    var disY = 0;

    if ( oBtn.setCapture ) {    
        oBtn.setCapture();   
    }

    oBtn.onmousedown = function(ev)
    {
        var oEv = ev || event;
        disY = oEv.clientY - oBtn.offsetTop;

        document.onmousemove = function(ev)
        {
            var oEvent = ev || event;
            var Top = oEvent.clientY - disY;

            if(Top < 0){
                Top = 0;
            }else if(Top > oBar.offsetHeight - oBtn.offsetHeight){
                Top = oBar.offsetHeight - oBtn.offsetHeight;
            }

            oBtn.style.top = Top + 'px';

            var scale = Top / (oBar.offsetHeight - oBtn.offsetHeight);

            oCont.style.top = -scale * (oCont.offsetHeight - oWarp.offsetHeight) + 'px';
        };

        document.onmouseup = function()
        {
            document.onmousemove = null;
            document.onmouseup = null;
 　　　　　　 if ( oBtn.releaseCapture ) {
                oBtn.releaseCapture();
            }
        };

        return false;
    };
};
</script>