利用js实现自定义滚动条

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>自定义滚动条</title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			#box{
				width: 300px;
				height: 530px;
				margin: 40px auto;
				position: relative;
				/*溢出隐藏*/
				overflow: hidden;
				/*不进行js自定义设置也可以做到滑动条如下两者搭配使用*/
				/*overflow: hidden;
				overflow-y: scroll;*/
			}
			/*内容*/
			#content{
				width:285px;
				position: absolute;
				left: 0;
				top: 0;
				font-size: 20px;
			}
			/*滑动条下面的浅灰色*/
			#slide-box{
				width: 15px;
				height: 530px;
				position: absolute;
				top: 0;
				right: 0;
				background-color: gainsboro;
			}
			#slide{
				width: 15px;
				/*高度不能写 因为要参考具体内容的大小*/
				/*height: 30px;*/
				background-color: gray;
				position: absolute;
				top:0;
				left:0;
				border-radius: 7.5px;
			}
			
			
			
		</style>
	</head>
	<body>
		<div id="box">
			<!--内容区域-->
			<div id="content">
				　内容区域

			</div>
		
		  <!--模仿滑动条-->
		  <div id="slide-box">
		  	<div id="slide"></div>
		  </div>
		</div>
	</body>
</html>
<script type="text/javascript">
	//查找标签
	var slideBox = document.querySelector("#slide-box");
	//按照比例设置滚动条的高度
	slide.style.height = box.offsetHeight / content.offsetHeight * slideBox.offsetHeight + "px";
	
	
	
	//给box添加滚轮事件
	box.onmousewheel = function(){
		if(event.wheelDelta > 0){
			//滚轮向下滚动   看下面的内容
			content.style.top = content.offsetTop + 20 + "px";
			//注意 top值最大就是0 因为运行结束,顶部的就是新闻的第一行!!
			//往上走是负值   往下才是正值!!! 其实一直都是负的top值 到 0 
		    if (content.offsetTop >= 0) {
		    	content.style.top = "0px";
		    }
		    //修改滚动条的位置
		    slide.style.top = -(content.offsetTop / content.offsetHeight) * slideBox.offsetHeight + "px";
		}else{
			//滚轮向上  看上面的内容
			content.style.top = content.offsetTop - 20 + "px";
			//设置最小top值!!
			if(content.offsetTop <=box.offsetHeight - content.offsetHeight){
				content.style.top = box.offsetHeight - content.offsetHeight + "px";
			}
			 //修改滚动条的位置
		    slide.style.top = -(content.offsetTop / content.offsetHeight) * slideBox.offsetHeight + "px";
		}
	}
	
	
	//滚动条 按下可以滑动
	slide.onmousedown = function(){
		//获取滑动条静止的时候 距离浏览器窗口顶部的位置
		var t = event.clientY - this.offsetTop;
		slideBox.onmousemove = function(){
			slide.style.top = event.clientY - t + "px";
			//设置界限  上下不能滑出父标签范围
			if(slide.offsetTop <= 0){
				slide.style.top = "0px";
			}
			if(slide.offsetTop > slideBox.clientHeight - slide.offsetHeight){
				slide.style.top = slideBox.clientHeight - slide.offsetHeight + "px";
			}
			//修改内容的top值
			content.style.top = - slide.offsetTop / slideBox.offsetHeight * content.offsetHeight + "px";
		}
	}
	//鼠标抬起  滑块结束滑动
	slide.onmouseup = function(){
		slideBox.onmousemove = null;
	}
	
</script>
前端三剑客
#JS
利用js实现自定义滚动条
http://ultracode.cn/2020/12/07/JS/利用js实现自定义滚动条/
作者
Win
发布于
2020年12月7日
许可协议