使用js实现一个简单的滚动条过程解析
程序员文章站
2022-12-18 19:16:13
当我们给元素加上 overflow: auto; 的时候，就会出现滚动条，然而浏览的不同，滚动条的样式大不一样，有些甚至非常丑。
于是就想着自己写一个滚动条，大概需要弄清...
当我们给元素加上 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"});
最后看一下效果：
虽然效果很丑，但是可控，自己调一下就可以了
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。