模拟滚动条控制内容

html代码：

<div id="div1">
    <div id="div2"></div>
</div>

<div id="div3">
    <div id="div4">
        长文本
    </div>
</div>

css代码：

body,div{
    margin: 0;
    padding: 0;
}
#div1{
    width: 30px;
    height: 500px;
    background: black;
    position: absolute;
    left: 10px;
    top: 10px;
}
#div2{
    width: 30px;
    height: 30px;
    background: red;
    position: absolute;
    left: 0;
    top: 0;
}
#div3{
    width: 498px;
    height: 498px;
    border: 1px solid green;
    position: absolute;
    left: 50px;
    top: 10px;
    overflow:hidden;
}
#div4{
    position: absolute;
    left: 0;
    top: 0;
}

javascript代码：

window.onload = function(){
    var oDiv1 = document.getElementById("div1");
    var oDiv2 = document.getElementById("div2");
    var oDiv3 = document.getElementById("div3");
    var oDiv4 = document.getElementById("div4");
    
    iMaxTop = oDiv1.offsetHeight - oDiv2.offsetHeight;
    
    oDiv2.onmousedown = function(ev){
        var ev = ev || event;
        var disY = ev.clientY - this.offsetTop;
        
        document.onmousemove = function(ev){
            var ev = ev || event;
            var T = ev.clientY - disY;
            
            if( T < 0 ){
                T = 0;
            }else if( T > iMaxTop ){
                T = iMaxTop;
            }
            
            oDiv2.style.top = T + "px";
            
            var iScale = T / iMaxTop;
            document.title = iScale;
            
            oDiv4.style.top = (oDiv3.offsetHeight - oDiv4.offsetHeight) * iScale + "px";
        }
        
        document.onmouseup = function(){
            document.onmousemove = document.onmouseup = null;
        }
        
        return false;
    }
};