JavaScript实现垂直滚动条效果

2019-11-19 17:52:25

字体：大中小

来源：转载

供稿：网友

本文实例为大家分享了js垂直滚动条的实现代码，供大家参考，具体内容如下

1、红色盒子高度计算公式：

容器的高度 / 内容的高度 * 容器的高度

2、红色方块移动一像素，我们的内容盒子移动多少呢？

（内容盒子高度 - 大盒子高度） / (大盒子高度 - 红色盒子的高度) 计算倍数

（内容盒子高度 - 大盒子高度）/ (大盒子高度 - 红色盒子的高度) * 红色盒子移动的数值

<html><head>  <meta charset="UTF-8">  <title>垂直滚动条</title>  <style>  *{    padding: 0;    margin: 0;  }    .box{      width: 300px;      height: 500px;      border: 1px solid red;      padding-right: 20px;      margin: 100px;      position: relative;    }    .content{       padding: 5px 18px 10px 5px;      position: absolute;      left: 0;      top: -10px;    }    .scroll{      position: absolute;      top: 0;      right: 0;      background-color: #ccc;      width: 20px;      height: 100%;    }    .bar{      width: 100%;      height: 20px;      background-color: red;      border-radius: 10px;      position: absolute;      left: 0;      top: 0;      cursor: pointer;    }  </style>  </head><body>  <div class="box" id="box">    <div class="content">      三观不同，一句话都嫌多。我想，人和人之间一定存在磁场这回事，沿着三观向外辐射。   ………… </div>    <div class="scroll">      <div class="bar"></div>    </div>  </div>  <script>      var box = document.getElementById('box');    var content = box.children[0];    var scroll = box.children[1];    var bar = scroll.children[0];    //计算滚动条红色bar的长度：容器长度/内容长度 * 容器长度,,比例关系    bar.style.height = box.offsetHeight / content.offsetHeight * box.offsetHeight +"px";    bar.onmousedown = function(event){      var event = event || window.event;      var y = event.clientY - this.offsetTop;      document.onmousemove = function(event){        var event = event || window.event;        var top = event.clientY - y;        if(top < 0)          top =0;        else if(top > scroll.offsetHeight - bar.offsetHeight)          top = scroll.offsetHeight - bar.offsetHeight;        bar.style.top = top +"px";        //（内容盒子高度 - 大盒子高度） / (大盒子高度 - 红色盒子的高度)  * 红色盒子移动的数值        content.style.top = -(content.offsetHeight - box.offsetHeight)/(box.offsetHeight - bar.offsetHeight)*top+"px";        window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();  // 防止拖动滑块的时候， 选中文字      }    }    document.onmouseup = function(){      document.onmousemove = null;    }  </script></body></html>

效果：