js 模拟滚动条 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
    #div1{width:30px;height:500px;background:#000;position:absolute;}
    #div2{width:30px;height:100px;background:red;position:absolute;left:0;top:0;display:none;}
    #content1{width:500px;height:500px;border:1px solid #063;position:absolute;left:44px; overflow:hidden;}
    #content2{position:absolute;}
</style>
<script>
    window.onload = function(){
        var oDiv1 = document.getElementById('div1');
        var oDiv2 = document.getElementById('div2');
        var oDiv3 = document.getElementById('content1');
        var oDiv4 = document.getElementById('content2');
        var contentHeight = oDiv3.clientHeight-oDiv4.offsetHeight;
        
        if(contentHeight >= 0){
            //直接返回
            return false;
        }
        //溢出，显示滚动条
        var scrolRatio = oDiv3.clientHeight/oDiv4.offsetHeight;
        var scrolHeight = scrolRatio*100;
        oDiv2.style.height = scrolHeight+'px';
        oDiv2.style.display = 'block';
        var maxTop = 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 > maxTop){
                    T = maxTop;
                }
                oDiv2.style.top = T+'px';
                var iScale = T/maxTop;
                oDiv4.style.top = contentHeight*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='content1'>
    <div id='content2'>
     yy1<br /> yyl<br /> yy2<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yy3<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br />     yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br />     yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yy100<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br />     yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br />     yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br />     yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yy200<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br />     yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br />     yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br />     yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yy400<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br />     yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br />     yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yy500<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yy900<br />
    </div>
</div>
</body>
</html>

 

posted on 2018-04-29 18:45  朝颜陌  阅读(844)  评论(0)    收藏  举报

导航