使用 js，自己寫一個簡單的滾動條
阿新 • • 發佈：2019-03-07
back http 之前 fun 完全 light get ini 計算
當我們給元素加上 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 + border clientHeight ： height + padding scrollHeight ： 內容的高度(所有子元素高度和) + 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"});
最後看一下效果：
雖然效果很醜，但是可控，自己調一下就可以了
使用 js，自己寫一個簡單的滾動條