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>

效果：