dom 输入文字模拟滚动

时间：2015-01-22 00:16:35 阅读：216 评论：0 收藏：0 [点我收藏+]

标签：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
#div1{
    width:30px;
    height:500px;
    background:#000;
    position:absolute;
    left:10px;
    top:10px;
    }
#div2{
    width:30px;
    height:30px;
    position:absolute;
    background:red;
    left:0px;
    top:0px;
    }
#div3{
    width:498px;
    border:1px #ccc solid;
    height:498px;
    position:absolute;
    left:50px;
    top:10px;
    overflow:hidden;
    }
#div4{
    position:absolute;    
    }
textarea{
    position:absolute;
    left:50px;
    top:550px;
    width:500px;
    height:200px;
    }            
</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 otext = document.getElementsByTagName(‘textarea‘)[0];
    var ratio = odiv3.clientHeight / odiv4.offsetHeight > 1 ? 1 : odiv3.clientHeight / odiv4.offsetHeight; 
    
    function barheight()
    {
        var ratio = odiv3.clientHeight / odiv4.offsetHeight > 1 ? 1 : odiv3.clientHeight / odiv4.offsetHeight; 
        odiv2.style.height = odiv1.clientHeight * ratio + ‘px‘;
    }
    
    barheight();
    
    otext.onkeyup = function ()
    {
        odiv4.innerHTML = otext.value;
        barheight();
    }
    
    odiv2.onmousedown = function (ev)
    {
        var ev = ev || event;
        var diy = ev.clientY - this.offsetHeight;
        if(odiv2.setCapture)
        {
            odiv2.setCapture();
        }
        document.onmousemove = function (ev)
        {
            var ev = ev || event;
            var T = ev.clientY - diy;
            var maxTop = odiv1.offsetHeight - odiv2.offsetHeight;
            
            if(T < 0 )
            {
                T = 0;
            }
            if(T > maxTop)
            {
                T = maxTop;
            }
            odiv2.style.top = T + ‘px‘;
            odiv4.style.top = (odiv3.clientHeight - odiv4.offsetHeight)*(T/maxTop) + ‘px‘;
            
        };
        
        document.onmouseup = function ()
        {
            document.onmousedown = document.onmousemove = null;
            if(odiv2.releaseCapture)
            {
                odiv2.releaseCapture();
            }
        }
        
        return false;
        
    }
};
</script>
</head>

<body>
    <div id="div1">
        <div id="div2"></div>
    </div>
    <div id="div3">
        <div id="div4"></div>
    </div>
    <textarea placeholder="请在文本框输入文字"></textarea>
</body>
</html>

dom 输入文字模拟滚动

标签：

原文地址：http://www.cnblogs.com/mayufo/p/4240433.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行