自制滚动条

最新推荐文章于 2024-05-17 04:04:51 发布

grain2017

最新推荐文章于 2024-05-17 04:04:51 发布

阅读量323

点赞数

文章标签： javascript 浏览器

本文链接：https://blog.csdn.net/weixin_39856480/article/details/78828076

版权

<!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>

grain2017

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
自制滚动条

html>html lang="en">head> meta charset="UTF-8"> title>Titletitle> style> *{ margin:0; padding:0; } html,body { height: 100%;
复制链接

扫一扫