报名工具小程序怎么用_使用js完成一个简略的滚

使用js实现一个简单的滚动条过程解析       这篇文章主要介绍了使用js实现一个简单的滚动条过程解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

当我们给元素加上 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: dee凡科抠图kyblue;
 /style 
 /head 
 body 
 div id="wrap" 
 div id="boxMidle" 
 div id="content" 
 div 内容1 /div 
 div 内容2 /div 
 div 内容3 /div 
 /div 
 /div 
 div 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"});

最后看一下效果:

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

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