自制滚动条模拟-优快云博客

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .box {
            width: 300px;
            height: 500px;
            border: 1px solid red;
            margin: 50px auto;
            overflow: hidden;
            position: relative;
        }
        .scroll {
            width: 20px;
            height: 530px;
            background-color: #ccc;
            position: absolute;
            top: 0;
            right: 0;
        }
        .bar {
            width: 20px;
            background-color: red;
            border-radius: 10px;
            cursor: pointer;
            position: absolute;
            top: 0;
        }
        .content {
            padding: 15px;
        }
    </style>

    <script src="animate.js"></script>
    <script>
        window.onload = function () {
            //需求：模拟滚动条，鼠标拖动滚动条，滚动条动，而且内容等比例联动。
            //步骤：
            //1.根据内容和盒子的比例确定bar的高。
            //2.绑定事件（鼠标按下，然后移动）
            //3.鼠标移动，bar联动
            //4.内容等比例联动


            //0.获取相关元素
            var boxDiv=document.getElementById("box");
            var contentDiv=boxDiv.children[0];
            var scrollDiv=boxDiv.children[1];
            var barDiv=scrollDiv.children[0];
            
            var barHeight=(scrollDiv.offsetHeight*boxDiv.offsetHeight)/contentDiv.offsetHeight;
            barDiv.style.height=barHeight+"px";
            
            barDiv.onmousedown=function (event) {
                event=event||window.event;
                var pageY=event.pageY||scroll().top+event.clientY;
                console.log("pageY:"+pageY);
                var gap=pageY-barDiv.offsetTop; //鼠标距离bar顶端的间距
                console.log("barDiv.offsetTop:"+barDiv.offsetTop);
                console.log("gap:"+gap);
                
                document.onmousemove=function (event) {
                    event=event||window.event;
                    var pageYY=event.pageY||scroll().top+event.clientY;
                    pageYY=pageYY-gap;
                    if(pageYY<0)
                    {
                        pageYY=0;
                    }
                    if(pageYY>(scrollDiv.offsetHeight-barDiv.offsetHeight))
                    {
                        pageYY=scrollDiv.offsetHeight-barDiv.offsetHeight;
                    }
                    barDiv.style.top=pageYY+"px";
                    
                    
                    //大的在上面，下的在下面
                    //内容走的距离/bar走的距离=(内容-大盒子)/(scroll-bar)
                    //内容走的距离=bar走的距离*(内容-大盒子)/(scroll-bar)
                    
                    var contenY=pageYY*(contentDiv.offsetHeight-boxDiv.offsetHeight)/(scrollDiv.offsetHeight-barDiv.offsetHeight);
                    contentDiv.style.marginTop=-contenY+"px";
                    
                     //让被选文字清除。
                    window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
                }
            }
            
            document.onmouseup = function () {
                document.onmousemove = null;
            }
        }
    </script>

</head>
<body>
    <div class="box" id="box">
        <div class="content">
            孩儿励志出湘关，学不成名终不还。<br>
            埋骨何须桑梓地，人生无处不青山。<br>
            孩儿励志出湘关，学不成名终不还。<br>
            埋骨何须桑梓地，人生无处不青山。<br>
            孩儿励志出湘关，学不成名终不还。<br>
            埋骨何须桑梓地，人生无处不青山。<br>
            孩儿励志出湘关，学不成名终不还。<br>
            埋骨何须桑梓地，人生无处不青山。<br>
            孩儿励志出湘关，学不成名终不还。<br>
            埋骨何须桑梓地，人生无处不青山。<br>
            孩儿励志出湘关，学不成名终不还。<br>
            埋骨何须桑梓地，人生无处不青山。<br>
            孩儿励志出湘关，学不成名终不还。<br>
            埋骨何须桑梓地，人生无处不青山。<br>
            孩儿励志出湘关，学不成名终不还。<br>
            埋骨何须桑梓地，人生无处不青山。<br>
            孩儿励志出湘关，学不成名终不还。<br>
            埋骨何须桑梓地，人生无处不青山。<br>
            孩儿励志出湘关，学不成名终不还。<br>
            埋骨何须桑梓地，人生无处不青山。<br>
            孩儿励志出湘关，学不成名终不还。<br>
            埋骨何须桑梓地，人生无处不青山。<br>
            孩儿励志出湘关，学不成名终不还。<br>
            埋骨何须桑梓地，人生无处不青山。<br>
            孩儿励志出湘关，学不成名终不还。<br>
            埋骨何须桑梓地，人生无处不青山。<br>
            孩儿励志出湘关，学不成名终不还。<br>
            埋骨何须桑梓地，人生无处不青山。<br>
            孩儿励志出湘关，学不成名终不还。<br>
            埋骨何须桑梓地，人生无处不青山。<br>
            孩儿励志出湘关，学不成名终不还。<br>
            埋骨何须桑梓地，人生无处不青山。<br>
            孩儿励志出湘关，学不成名终不还。<br>
            埋骨何须桑梓地，人生无处不青山。<br>
            孩儿励志出湘关，学不成名终不还。<br>
            埋骨何须桑梓地，人生无处不青山。<br>
            孩儿励志出湘关，学不成名终不还。<br>
            埋骨何须桑梓地，人生无处不青山。<br>
            孩儿励志出湘关，学不成名终不还。<br>
            埋骨何须桑梓地，人生无处不青山。<br>
            孩儿励志出湘关，学不成名终不还。<br>
            埋骨何须桑梓地，人生无处不青山。<br>
            孩儿励志出湘关，学不成名终不还。<br>
            埋骨何须桑梓地，人生无处不青山。<br>
            孩儿励志出湘关，学不成名终不还。<br>
            埋骨何须桑梓地，人生无处不青山。<br>
            孩儿励志出湘关，学不成名终不还。<br>
            埋骨何须桑梓地，人生无处不青山。<br>
            孩儿励志出湘关，学不成名终不还。<br>
            埋骨何须桑梓地，人生无处不青山。<br>
            孩儿励志出湘关，学不成名终不还。<br>
            埋骨何须桑梓地，人生无处不青山。<br>
            孩儿励志出湘关，学不成名终不还。<br>
            埋骨何须桑梓地，人生无处不青山。<br>
            孩儿励志出湘关，学不成名终不还。<br>
            埋骨何须桑梓地，人生无处不青山。<br>
            孩儿励志出湘关，学不成名终不还。<br>
            埋骨何须桑梓地，人生无处不青山。<br>
            孩儿励志出湘关，学不成名终不还。<br>
            埋骨何须桑梓地，人生无处不青山。<br>
            孩儿励志出湘关，学不成名终不还。<br>
            埋骨何须桑梓地，人生无处不青山。<br>
            孩儿励志出湘关，学不成名终不还。<br>
            埋骨何须桑梓地，人生无处不青山。<br>
            孩儿励志出湘关，学不成名终不还。<br>
            埋骨何须桑梓地，人生无处不青山。<br>
            孩儿励志出湘关，学不成名终不还。<br>
            埋骨何须桑梓地，人生无处不青山。<br>
            孩儿励志出湘关，学不成名终不还。<br>
            埋骨何须桑梓地，人生无处不青山。<br>
            -------------结束------------<br>
        </div>
        <div class="scroll">
            <div class="bar"></div>
        </div>
    </div>



</body>
</html>