js 模拟滚动条

Posted 朝颜陌

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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>

 

以上是关于js 模拟滚动条的主要内容,如果未能解决你的问题,请参考以下文章

如何在 MS Word 文档中显示代码片段,因为它在 *** 中显示(滚动条和灰色背景)

js,鼠标上下滑轮或者拉动滚动条触发事件

js 如何禁止选中文本

如何用js控件div的滚动条,让它在内容更新时自动滚到底部?

selenium 如何控制滚动条逐步滚动

重写移动端滚动条[iScroll.js核心代码]