使用js實(shí)現(xiàn)一個(gè)簡單的滾動條過程解析

更新時(shí)間：2019年09月10日 14:23:30 作者：muamaker

這篇文章主要介紹了使用js實(shí)現(xiàn)一個(gè)簡單的滾動條過程解析,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下

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

于是就想著自己寫一個(gè)滾動條，大概需要弄清楚一下這幾個(gè)點(diǎn)：

1、滾動條 bar 是根據(jù)內(nèi)容的多少，高度不一樣的，這個(gè)需要?jiǎng)討B(tài)的計(jì)算

2、滾動條 bar 的 top 位置和內(nèi)容scrollTop 的關(guān)系。

思路：

使用嵌套的布局，如下：

<!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">內(nèi)容1</div>
          <div class="s2">內(nèi)容2</div>
          <div class="s3">內(nèi)容3</div>
        </div>
      </div>
      <div class="bar" id="bar"></div>
    </div>
     
  </body>
</html>

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

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

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

bar 為滾動條

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

offsetHeight ： height + padding + border
clientHeight ： height + padding
scrollHeight ： 內(nèi)容的高度(所有子元素高度和) + padding

1、計(jì)算比例：

bar的高度 / wrap的高度 = wrap的高度 / wrap 內(nèi)容部子元素的高度和；此時(shí)忽略 wrap 的padding：0

bar的top / wrap的scrollTop = wrap的高度 / wrap 內(nèi)容部子元素的高度和；

需要注意，當(dāng)比例的值小于 1 的時(shí)候，說明這個(gè)時(shí)候沒有出現(xiàn)滾動條。

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

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"; //內(nèi)容的寬度
var rate = $boxMidle.clientHeight/ $boxMidle.scrollHeight; //滾動條高度的比例,也是滾動條top位置的比例
 var barHeight = rate * $boxMidle.clientHeight; //滾動條的 bar 的高度
if(rate < 1){
  //需要出現(xiàn)滾動條,并計(jì)算滾動條的高度
  $bar.style.height = barHeight + "px";
}else{
  //不需要出現(xiàn)滾動條
  $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); //內(nèi)容的高度(所有子元素高度和) + padding
  console.log(this.scrollTop);
  $bar.style.top = this.scrollTop*rate + "px";
}

使用面向?qū)ο蟀妫?/p>

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); //內(nèi)容的高度 + padding
    console.log(this.scrollTop);
    me.scrollToY(this.scrollTop * me.rate)
  }
}
ScrollBar.prototype.init = function(){
  this.$content.style.width = this.$wrap.clientWidth + "px"; //內(nèi)容的寬度
  this.rate = this.$boxMidle.clientHeight/this.$boxMidle.scrollHeight; //滾動條高度的比例,也是滾動條top位置的比例
   this.barHeight = this.rate * this.$boxMidle.clientHeight; //滾動條的 bar 的高度
  if(this.rate < 1){
    //需要出現(xiàn)滾動條,并計(jì)算滾動條的高度
    this.$bar.style.height = this.barHeight + "px";
  }else{
    //不需要出現(xiàn)滾動條
    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"});

最后看一下效果：

雖然效果很丑，但是可控，自己調(diào)一下就可以了