自制滚动条

来源：互联网发布：网络攻击主要技术分析编辑：程序博客网时间：2024/05/01 12:35
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>        *{            margin:0;            padding:0;        }        html,body {            height: 100%;            overflow: hidden;        }      #box{          width:20px;          height:100%;          background: pink;          position: absolute;          right:0;          top:0;      }        #inner{            width:20px;            background: gray;            position: absolute;            top:0;            right:0;        }        #text{            position: absolute;        }    </style></head><body><div id="text"></div><div id="box"><div id="inner"></div></div><script>    var eleY = 0;    var startY = 0;var inner = document.getElementById("inner")var text = document.getElementById("text")    var write = ""    for(var i=0;i<100;i++){    write += i+"<br/>";    }    text.innerHTML = write;     inner.style.height = (document.documentElement.clientHeight*document.documentElement.clientHeight)/text.offsetHeight+"px";    inner.onmousedown = function (ev) {            ev = ev||event;            //元素的初始位置        eleY = inner.offsetTop;        //鼠标的开始位置        startY = ev.clientY        inner.setCapture&&inner.setCapture()        document.onmousemove = function (ev) {            ev = ev||event;            //鼠标现在的位置            nowY = ev.clientY;            var top = eleY+(nowY-startY);            if(top<0){                top=0;            }else if(top>document.documentElement.clientHeight-inner.offsetHeight){                top=document.documentElement.clientHeight-inner.offsetHeight            }            var scale = top/(document.documentElement.clientHeight-inner.offsetHeight)              text.style.top = -(text.offsetHeight-document.documentElement.clientHeight)*scale+"px";            inner.style.top =top +"px";        }        document.onmouseup = function () {            document.onmousemove = document.onmouseup = null;            document.releaseCapture && document.releaseCapture()        }        return false;    }</script></body></html>
阅读全文
0 0