使用js實現一個簡單的滾動條過程解析

2019-11-19 10:50:27

字體：大中小

來源：轉載

供稿：網友

當我們給元素加上 overflow: auto; 的時候，就會出現滾動條，然而瀏覽的不同，滾動條的樣式大不一樣，有些甚至非常丑。

于是就想著自己寫一個滾動條，大概需要弄清楚一下這幾個點：

1、滾動條 bar 是根據內容的多少，高度不一樣的，這個需要動態的計算

2、滾動條 bar 的 top 位置和內容scrollTop 的關系。

思路：

使用嵌套的布局，如下：

<!DOCTYPE html><html>  <head>    <meta charset="utf-8">    <title></title>    <style type="text/css">      *{        padding: 0;        margin: 0;      }      .wrap{        width: 400px;        height: 400px;        border: 2px solid deeppink;        margin: 0 auto;        overflow: hidden;        position: relative;      }      .box-middle{        height: 100%;        overflow: auto;        width: 200%;      }      .box{        width: 50%;      }      .bar{        background: #000;        width: 10px;        position: absolute;        top: 0;        right: 0;      }      .s1{        height: 400px;        background: pink;      }      .s2{        height: 400px;        background: deeppink;      }      .s3{        height: 400px;        background: deepskyblue;      }    </style>  </head>  <body>    <div class="wrap" id="wrap">      <div class="box-middle" id="boxMidle">        <div class="box" id="content">          <div class="s1">內容1</div>          <div class="s2">內容2</div>          <div class="s3">內容3</div>        </div>      </div>      <div class="bar" id="bar"></div>    </div>       </body></html>

wrap 為最外層，給overflow：hidden;。

box-middle 是中間層，也是有滾動條的一層，可以寬度給多一點，這樣就看不見滾動條了。

box就是內容層，通過js，計算使得 box 的寬度和wrap 保持一致，這樣就完全看不見滾動條了

bar 為滾動條

寫js之前，首先要弄懂一下三個屬性：

offsetHeight ： height + padding + borderclientHeight ： height + paddingscrollHeight ： 內容的高度(所有子元素高度和) + padding

1、計算比例：

bar的高度 / wrap的高度 = wrap的高度 / wrap 內容部子元素的高度和；此時忽略 wrap 的padding：0

bar的top / wrap的scrollTop = wrap的高度 / wrap 內容部子元素的高度和；

需要注意，當比例的值小于 1 的時候，說明這個時候沒有出現滾動條。

知道算法之后，寫代碼就簡單很多，普通版代碼如下：

var $wrap = document.getElementById("wrap");var $boxMidle = document.getElementById("boxMidle");var $content = document.getElementById("content");var $bar = document.getElementById("bar");$content.style.width = $wrap.clientWidth + "px"; //內容的寬度var rate = $boxMidle.clientHeight/ $boxMidle.scrollHeight; //滾動條高度的比例,也是滾動條top位置的比例 var barHeight = rate * $boxMidle.clientHeight; //滾動條的 bar 的高度if(rate < 1){  //需要出現滾動條,并計算滾動條的高度  $bar.style.height = barHeight + "px";}else{  //不需要出現滾動條  $bar.style.display = "none";}$boxMidle.onscroll = function(e){  console.log("offsetHeight"+this.offsetHeight); //height + padding + border  console.log("clientHeight"+this.clientHeight); // height + padding  console.log("scrollHeight"+this.scrollHeight); //內容的高度(所有子元素高度和) + padding  console.log(this.scrollTop);  $bar.style.top = this.scrollTop*rate + "px";}

使用面向對象版：

function ScrollBar(opt){  var me = this;  me.$wrap = document.getElementById(opt.wrap);  me.$boxMidle = document.getElementById(opt.boxMidle);  me.$content = document.getElementById(opt.content);  me.$bar = document.getElementById(opt.bar);  me.init();  me.$boxMidle.onscroll = function(e){    //console.log("offsetHeight"+this.offsetHeight); //content + padding + border    //console.log("clientHeight"+this.clientHeight); // content + padding    //console.log("scrollHeight"+this.scrollHeight); //內容的高度 + padding    console.log(this.scrollTop);    me.scrollToY(this.scrollTop * me.rate)  }}ScrollBar.prototype.init = function(){  this.$content.style.width = this.$wrap.clientWidth + "px"; //內容的寬度  this.rate = this.$boxMidle.clientHeight/this.$boxMidle.scrollHeight; //滾動條高度的比例,也是滾動條top位置的比例   this.barHeight = this.rate * this.$boxMidle.clientHeight; //滾動條的 bar 的高度  if(this.rate < 1){    //需要出現滾動條,并計算滾動條的高度    this.$bar.style.height = this.barHeight + "px";  }else{    //不需要出現滾動條    this.$bar.style.display = "none";  }}ScrollBar.prototype.scrollToY = function(y){  if(this.rate < 1){    this.$bar.style.top = y + 'px';  }} var obj = new ScrollBar({"wrap":"wrap","boxMidle":"boxMidle","content":"content","bar":"bar"});

最后看一下效果：

雖然效果很丑，但是可控，自己調一下就可以了