前端学习笔记 day14 模拟滚动条 

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #box {
            width: 400px;
            height: 500px;
            border: 1px solid red;
            margin-left: 400px;
            margin-top: 60px;
            position: relative;
            overflow: hidden;
            line-height: 25px;
        }
        #content {
            position: absolute;
            font-size: 16px;
            width: 380px;
            background-color: #fff;
        }
        #scroll {
            position: absolute;
            width: 20px;
            height: 500px;
            right: 0px;
            background-color: lightgrey;
        }
        #bar {
            width: 20px;
            /*height: 60px;*/
            position: absolute;
            background-color: pink;
            border-radius: 5px;
        }
    </style>
</head>
<body>
    <div id='box'>
        <div id='content'>
            我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱
            我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱
        </div>

        <div id='scroll'>
            <div id='bar'></div>
        </div>
    </div>


    <script>
        var box = document.getElementById('box');
        var content = document.getElementById('content');
        var scroll =document.getElementById('scroll');
        var bar = document.getElementById('bar');
        var barHeight = box.clientHeight / content.scrollHeight * scroll.clientHeight;
        console.log(box.clientHeight);
        console.log(content.scrollHeight);
        console.log(scroll.clientHeight)
        bar.style.height = 0 + 'px';
        if (content.scrollHeight > box.clientHeight) {
            console.log(barHeight);
            bar.style.height = barHeight + 'px';
        }
        bar.onmousedown = function(e) {
            var y = e.pageY - bar.offsetTop - scroll.offsetTop;
            document.onmousemove = function(e) {
                var barY = e.pageY - y - scroll.offsetTop;
                var maxBar = scroll.clientHeight - bar.clientHeight;
                var maxContent = content.scrollHeight - box.clientHeight;
                barY = (barY < 0) ? 0 : barY;
                barY = (barY > maxBar) ? maxBar : barY;
                bar.style.top = barY + 'px';

                var contentY = barY / maxContent * maxBar;
                content.style.top = -contentY + 'px';

            } 
        }
        document.onmouseup = function(e) {
            document.onmousemove = null;
        }
    </script>
</body>
</html>

运行结果：

 

posted @ 2019-01-02 15:55  写的BUG代码少  阅读(140)  评论(0)  编辑  收藏  举报