自己设置滚动条

 

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
#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;}
</style>
<script>
window.onload = function() {
    
    var oDiv1 = document.getElementById('div1');
    var oDiv2 = document.getElementById('div2');
    var oDiv3 = document.getElementById('div3');
    var oDiv4 = document.getElementById('div4');
    
    var iMaxTop = oDiv1.offsetHeight - oDiv2.offsetHeight;  //滚动条可以滚动的最大高度=滚动条范围的高度-滚动条的高度
    
    oDiv2.onmousedown = function(ev) {  //鼠标点击滚动条执行的函数
        
        var ev = ev || event;  //事件的浏览器兼容性
        
        var disY = ev.clientY - this.offsetTop;  //鼠标到滚动条顶部的距离=鼠标的top-滚动条的top
        
        document.onmousemove = function(ev) {  //鼠标移动的时候执行的函数
            
            var ev = ev || event;  //事件的浏览器兼容性
            
            var T = ev.clientY - disY; //滚动条到顶部的距离=鼠标的top-鼠标到滚动条顶部的距离
            
            if ( T < 0 ) {  //如果超出顶部，距离等于0
                T = 0;
            } else if ( T > iMaxTop ) {  //如果距离大于最大值就等于最大值
                T = iMaxTop;
            }
            
            oDiv2.style.top = T + 'px';  //滚动条的高度
            
            var iScale = T / iMaxTop;  //滚动条滚动距离的百分比
            
            oDiv4.style.top = (oDiv3.clientHeight - oDiv4.offsetHeight) * iScale + 'px'; 
            //文字距离顶部的距离=（文字范围去掉边框的高度-文字的高度）*滚动条比例
            
        }
        
        document.onmouseup = function() {
            
            document.onmousemove = document.onmouseup = null;  //鼠标放开的时候清除鼠标移动的函数
            
        }
        
        return false; //清除鼠拖拽的默认事件
        
    }
    
}
</script>
</head>

<body>
    <div id="div1"><!--滚动条区域-->
        <div id="div2"></div><!--滚动条-->
    </div>
    <div id="div3">
        <div id="div4">文字内容</div>
    </div>
</body>
</html>

 

posted @ 2017-04-13 13:47  念念念不忘  阅读(126)  评论(0)    收藏  举报