当我们给元素加上 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，自己写一个简单的滚动条的更多相关文章

  1. 分享：计算机图形学期末作业！！利用WebGL的第三方库three.js写一个简单的网页版“我的世界小游戏”

    这几天一直在忙着期末考试,所以一直没有更新我的博客,今天刚把我的期末作业完成了,心情澎湃,所以晚上不管怎么样,我也要写一篇博客纪念一下我上课都没有听,还是通过强大的度娘完成了我的作业的经历.(当然作业 ...

  2. 用node.js从零开始去写一个简单的爬虫

    如果你不会Python语言,正好又是一个node.js小白,看完这篇文章之后,一定会觉得受益匪浅,感受到自己又新get到了一门技能,如何用node.js从零开始去写一个简单的爬虫,十分钟时间就能搞定, ...

  3. 用JavaScript写一个简单的计算器

    本文使用js实现了一个简单的加.减.乘.除计算器. 以下是css部分代码: *{ padding:0; margin:0; color: #424242; } .outer{ width:300px; ...

  4. express 写一个简单的web app

    之前写过一个简单的web app, 能够完成注册登录,展示列表,CURD 但是版本好像旧了,今天想写一个简单的API 供移动端调用 1.下载最新的node https://nodejs.org/zh- ...

  5. 用原生js来写一个swiper滑块插件

        是不是有点印象了,没错,他的最基本的用法就是左右滑动,插件使用者只需要写几行简单的html和js即可实现一个简单滑动效果,不过你完全可以组合各种元素来适应不同的场景. 当然插件我已经写好了,咱 ...

  6. 大前端工程化之写一个简单的webpack插件

    今天写一个简单的webpack插件,来学习一下webpack插件 webpack插件机制可以使开发者在webpack构建过程中加入自己的行为,来针对自己项目中的一些需求做一些定制化 首先我们得知道一个 ...

  7. 手把手教你从零写一个简单的 VUE--模板篇

    教程目录1.手把手教你从零写一个简单的 VUE2.手把手教你从零写一个简单的 VUE--模板篇 Hello,我又回来了,上一次的文章教会了大家如何书写一个简单 VUE,里面实现了VUE 的数据驱动视图 ...

  8. 从0开始写一个简单的vite hmr 插件

    从0开始写一个简单的vite hmr 插件 0. 写在前面 在构建前端项目的时候,除开基本的资源格式(图片,json)以外,还常常会需要导入一些其他格式的资源,这些资源如果没有第三方vite插件的支持 ...

  9. 用Python写一个简单的Web框架

    一.概述 二.从demo_app开始 三.WSGI中的application 四.区分URL 五.重构 1.正则匹配URL 2.DRY 3.抽象出框架 六.参考 一.概述 在Python中,WSGI( ...

随机推荐

  1. P1169 [ZJOI2007]棋盘制作 DP悬线法

    题目描述 国际象棋是世界上最古老的博弈游戏之一,和中国的围棋.象棋以及日本的将棋同享盛名.据说国际象棋起源于易经的思想,棋盘是一个8 \times 88×8大小的黑白相间的方阵,对应八八六十四卦,黑白 ...

  2. 99%的Linux运维工程师必须要掌握的命令及运用

    本为同步于微信公众号[IT行业技术圈]关注即可查看更多相关知识点~ Linux对于程序员来并不陌生,随着图形化界面的深入人心,渐渐地命令行开始淡出了我们的视野,随着时间的推移也变得生疏且陌生起来.在此 ...

  3. python接口测试-认识POST请求

    上午和一个大神交流了一下,给我了一点建议:多做笔记,勤复盘:及时记录自己,最好的提升不是来自于别人,而是来自于自身.我觉得挺有道理的,分享出来.共勉 说正事. 今天把post请求的大概内容看了一下.虽 ...

  4. Django表单字段汇总

    Field.clean(value)[source] 虽然表单字段的Field类主要使用在Form类中,但也可以直接实例化它们来使用,以便更好地了解它们是如何工作的.每个Field的实例都有一个cle ...

  5. XVII Open Cup named after E.V. Pankratiev. GP of Tatarstan

    A. Arithmetic Derivative 形如$p^p(p是质数)$的数的比值为$1$,用$k$个这种数相乘得到的数的比值为$k$,爆搜即可. #include<cstdio> # ...

  6. angular.isString()

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  7. GMA Round 1

    学弟说我好久没更blog了. 因为自己最近其实没干什么. 所以来搬运一下GMA Round 1 的比赛内容吧,blog访问量.网站流量一举两得. 链接:https://enceladus.cf/con ...

  8. __x__(3)0905第二天__W3C标准集合

    World Wide Web Consortium 万维网联盟(外语缩写:W3C)标准不是某一个标准,而是一系列标准的集合. 创建于 1994 年,是 Web 技术领域最具权威和影响力的国际中立性技术 ...

  9. 26 Arcpy跳坑系列——ExportToPNG

    最近在学习Arcpy的时候,还真是遇到了一个磨人的小妖精,我本来是想得到一个透明背景的png图的,根据官方的帮助文档, https://desktop.arcgis.com/zh-cn/arcmap/ ...

  10. php正则表达式 剔除字符串中 ,除了汉字的字符（只保留汉字） php 正则 只保留汉字，剔除所有符号

    <?php //提取字符串中的汉字其余信息剔除 $str='f龙,真 .,.,.?!::·…~&@#,.?!:;.……-&@#“”‘’〝 "〞＇´＇>< ...