模拟垂直滚动条

最新推荐文章于 2022-05-02 09:35:03 发布

python基础教程

最新推荐文章于 2022-05-02 09:35:03 发布

阅读量452

点赞数

分类专栏： 01前端基础教程html_css_js

本文链接：https://blog.csdn.net/stopcpp/article/details/52839835

版权

01前端基础教程html_css_js 专栏收录该内容

78 篇文章 0 订阅

订阅专栏

1.滚动条的高度 = 容器的高度/内容的高度*容器的高度
2.内容移动的距离=(内容的高度-容器的高度) / (容器的高度-滚动条的高度) * 滚动条移动的距离

<!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: 100px;
            position: relative;
            overflow: hidden;
        }
        .content{
            height: auto;
            padding-right: 20px;
            position: absolute;
            top: 0;
            left: 0;
            padding: 5px 20px 5px 5px;
        }
        .scroll{
            width: 20px;
            height: 100%;
            background-color: #eee;
            position: absolute;
            right: 0;
            top: 0;
        }
        .bar{
            width:  100%;
            height: 100px;
            background-color: red;
            cursor: pointer;
            border-radius:10px;
            position: absolute;
            top: 0;
            left: 0;
        }
    </style>
</head>
<body>
    <div class="box" id="box">
        <div class="content">
            这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容
            这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容
            这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容
            这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容
            这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容
            这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容
            这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容
            这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容
            这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容
        </div>
        <div class="scroll">
            <div class="bar"></div>
        </div>
    </div>
</body>
</html>
<script>
    var box = document.getElementById("box");
    var content = box.children[0];
    var scroll = box.children[1];
    var bar = scroll.children[0];
    //滚动条的高度 = 容器的高度/内容的高度*容器的高度
    if(content.offsetHeight<=box.offsetHeight){
        bar.style.height = 0;
    }else{
        bar.style.height = box.offsetHeight*scroll.offsetHeight/content.offsetHeight +"px";
    }
    //拖动滚动条
    bar.onmousedown = function (event) {
        var event = event || window.event;
        //var val = event.clientY - scroll.offsetHeight;
        var val = event.clientY - this.offsetTop;
        document.onmousemove = function (event) {
            var event = event || window.event;
            var barTop = event.clientY - val;
            var conTop = (content.offsetHeight-box.offsetHeight)/(box.offsetHeight-bar.offsetHeight)*barTop;
            if(barTop<0){
                barTop = 0;
            }else if(barTop > (box.offsetHeight - bar.offsetHeight)){
                barTop = box.offsetHeight - bar.offsetHeight;
            }else{
                content.style.top = -conTop + "px";
            }
            bar.style.top = barTop +"px";
        }
    }
    document.onmouseup  = function () {
        window.getSelection() ? window.getSelection().removeAllRanges() : document.selection.empty();
        document.onmousemove = null;
    }
</script>