纯JS自定义网页滚动条

最近在公司很忙，没什么时间更新，忙中抽时间做了一个JS滚动条,因为火狐浏览器与谷歌浏览器的滚动条自定义样式过于麻烦，所以我打算自己写个方便改样式的滚动条

css

html

			

				
测试(Start)
				
测试1
				
测试2
				
测试3
				
测试4
				
测试5
				
测试
				
测试
				
测试
				
测试
				
测试
				
测试
				
测试
				
测试
				
测试
				
测试(END)
			
		

js

//生成滚动条
document.querySelectorAll("#CheShi")[0].innerHTML +=
'
';
			var CheShi = document.querySelectorAll("#CheShi")[0];
			var CheShiU = document.querySelectorAll("#CheShi #CheShi_ul")[0];
			var Y_CustomScrollBar_span = document.querySelectorAll("#Y_CustomScrollBar span")[0];
			var CheShiH = CheShi.offsetHeight; //200
			var CheShiUH = CheShiU.offsetHeight; //441
			var XJValue = CheShiUH - CheShiH; //241
			var XJValue2 = CheShiH - XJValue; //-41
			var ExtraHeight = 0;
			var DownY = 0;
			var DownB = false;
			//设置滚动条的高度

			if (XJValue2 > 50 && XJValue2 < CheShiH) {
				Y_CustomScrollBar_span.style.height = XJValue2 + "px";
			} else if (XJValue2 < 50) {
				ExtraHeight = XJValue2 - 50;
				Y_CustomScrollBar_span.style.height = 50 + "px";
			} else {
				document.querySelectorAll("#Y_CustomScrollBar")[0].style.display = "none"
			}
			//计算鼠标偏移
			Y_CustomScrollBar_span.onmousedown = function(e1) {
				DownY = e1.offsetY;
				DownB = true;
			}
			Y_CustomScrollBar_span.onmouseup = function(e1) {
				DownB = false;
			}

			Y_CustomScrollBar_span.onmousemove = function(e2) {
				if (DownB == true) {
					//滚动条
					if (((e2.clientY - DownY)) >= 0 && ((e2.clientY - DownY)) <= CheShiH - parseInt(Y_CustomScrollBar_span.style.height)) {
						Y_CustomScrollBar_span.style.top = "" + (e2.clientY - DownY) + "px";
					}
					//滚动内容
					CheShi_ul.style.top = -(parseInt(Y_CustomScrollBar_span.style.top) * ((CheShiUH - CheShiH) / (CheShiH - parseInt(Y_CustomScrollBar_span.style.height))))  + "px"
				}
			}

效果