使用 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: 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，自己写一个简单的滚动条

猜你喜欢