使用js实现一个简单的滚动条过程解析

时间：2021-05-25

当我们给元素加上 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"});

最后看一下效果：

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章