js滚动条特效

来源：互联网发布：制作mp4视频软件编辑：程序博客网时间：2024/05/05 21:02
<!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;        }        .content {            padding: 5px 18px 5px 5px;            position: absolute;            top: 0;            left: 0;        }        .scroll {            width: 18px;            height: 100%;            position: absolute;            top: 0;            right: 0;            background-color: #eee;        }        .bar {            /*height: 100px;*/            width: 100%;            position: absolute;            top: 0;            left: 0;            background-color: red;            border-radius: 10px;            cursor: pointer;        }    </style></head><body><div class="box" id="box">    <div class="content" id="content">        我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容    </div>    <div class="scroll">        <div class="bar" id="bar"></div>    </div></div><script>    var box = document.getElementById("box");    var content = document.getElementById("content");    var bar = document.getElementById("bar");    bar.style.height = box.offsetHeight / content.offsetHeight * box.offsetHeight + "px";    bar.onmousedown = function (event) {        var event = event || window.event;        var pageY = event.pageY || event.clientY + document.documentElement.offsetTop;        var barBoxY = pageY - box.offsetTop - bar.offsetTop;        document.onmousemove = function (event) {            var event = event || window.event;            var pageY = event.pageY || event.clientY + document.documentElement.scrollTop;            var boxY = pageY - box.offsetTop;            var barposi = boxY - barBoxY;           if(barposi < 0){               barposi = 0;           }            if(barposi > box.offsetHeight- bar.offsetHeight){                barposi = box.offsetHeight- bar.offsetHeight;            }            bar.style.top = barposi + "px";            //4.2清除选中文字            window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();            content.style.top = -((barposi)/(box.offsetHeight - bar.offsetHeight)*(content.offsetHeight-box.offsetHeight)) + "px";        };    };    bar.onmouseup = function () {        document.onmousemove = null;    };</script></body></html>
0 0