溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇文章給大家分享的是有關使用JavaScript怎么實現一個滾動條，小編覺得挺實用的，因此分享給大家學習，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。
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"});以上就是使用JavaScript怎么實現一個滾動條，小編相信有部分知識點可能是我們日常工作會見到或用到的。希望你能通過這篇文章學到更多知識。更多詳情敬請關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
