js仿滚动条

最新推荐文章于 2020-11-14 18:52:27 发布

白日梦想jun

最新推荐文章于 2020-11-14 18:52:27 发布

阅读量255

点赞数

分类专栏： JavaScript 文章标签： js 滚动条

本文链接：https://blog.csdn.net/oiu1010110/article/details/52653116

版权

JavaScript 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>仿滚动条</title>
	<style type="text/css">
		#con_wrap {
			width: 300px;
			height: 300px;
			margin:0 auto;
			border:1px solid #333;
			/*overflow: hidden;*/
			position: relative;
		}
		#con {
			position: absolute;
			left: 0;
			top: 0;
			font-size: 1.2rem;
		}
		#scoll {
			width: 800px;
			height: 45px;
			background-color: #fbf3ba;
			position: absolute;
			bottom: 65px;
			left: 65px;
		}
		#scoll #scoll_sider {
			width: 75px;
			height: 45px;
			background-color: red;
			position: absolute;
			left: 0;
		}
		#rate {
			width: 70px;
			height: 34px;
			color:red;
			position: absolute;
			bottom: 5px;
			left:50%;
			margin-left: -35px;
		}
	</style>
</head>
<body>
	<div id="con_wrap">
		<div id="con">
			Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum ab voluptas eaque, veniam quos totam. Eos perferendis, porro nemo neque dignissimos aut corporis, illo amet vero debitis, tenetur possimus asperiores.
			Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum ab voluptas eaque, veniam quos totam. Eos perferendis, porro nemo neque dignissimos aut corporis, illo amet vero debitis, tenetur possimus asperiores.
			Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum ab voluptas eaque, veniam quos totam. Eos perferendis, porro nemo neque dignissimos aut corporis, illo amet vero debitis, tenetur possimus asperiores.
			Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum ab voluptas eaque, veniam quos totam. Eos perferendis, porro nemo neque dignissimos aut corporis, illo amet vero debitis, tenetur possimus asperiores.
		</div>
	</div>
	<div id="scoll">
		<div id="scoll_sider"></div>
	</div>
	<span id="rate">0%</span>
	<script type="text/javascript">
		var oScoll = document.getElementById('scoll');
		var oSco_sider = document.getElementById('scoll_sider');
		var oRate = document.getElementById('rate');
		var oCon = document.getElementById('con');
		var oCon_wrap = document.getElementById('con_wrap');
		var disX2 = 0;
		var rate = 0;
		oSco_sider.onmousedown = function(ev){
			var oEvent = ev||event;
			disX2 = oEvent.clientX - oSco_sider.offsetLeft;
			document.onmousemove = function(ev){
				var oEvent = ev||event;
				var l = oEvent.clientX - disX2;
				if (l<0) {
					l = 0;
				}else if(l > (oScoll.offsetWidth - oSco_sider.offsetWidth)){
					l = oScoll.offsetWidth - oSco_sider.offsetWidth;
				}
				oSco_sider.style.left = l + 'px';
				rate = l/(oScoll.offsetWidth - oSco_sider.offsetWidth);
				var temp = (rate*100).toFixed(2) + '%';
				oRate.innerHTML = temp;
				oCon.style.top = -rate*(oCon.offsetHeight - oCon_wrap.offsetHeight)+'px';

			}
			document.onmouseup = function(){
				document.onmousemove = null;
				document.onmouseup = null;
				
			}
		}
	</script>
</body>
</html>