案例模拟滚动条

最新推荐文章于 2024-05-14 17:01:47 发布

qq_38068491

最新推荐文章于 2024-05-14 17:01:47 发布

阅读量93

点赞数

本文链接：https://blog.csdn.net/qq_38068491/article/details/83038162

版权

<!DOCTYPE html>
<html>

	<head lang="en">
		<meta charset="UTF-8">
		<title></title>
		<style>
			.box {
				width: 300px;
				height: 500px;
				border: 1px solid red;
				margin: 100px;
				position: relative;
				overflow: hidden;
			}
			
			.content {
				height: auto;
				padding: 5px 18px 5px 5px;
				position: absolute;
				top: 0;
				left: 0;
			}
			
			.scroll {
				width: 18px;
				height: 100%;
				position: absolute;
				top: 0;
				right: 0;
				background-color: #eee;
			}
			
			.bar {
				width: 100%;
				height: 100px;
				background-color: red;
				cursor: pointer;
				border-radius: 10px;
				position: absolute;
				top: 0;
				left: 0;
			}
		</style>
	</head>

	<body>
		<div class="box" id="box">
			<!--内容可视区-->
			<div id="content" class="content">
				<!--内容区-->
				你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的 小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你 是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小 苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果 你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的 小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你 是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小 苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果 你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的 小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你 是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小 苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果 你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的 小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你 是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小 苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果 你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的 小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你 是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小 苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是 我的小苹果你是我的小苹果******
			</div>
			<div id="scroll" class="scroll">
				<!--滚动条所在区域-->
				<div id="bar" class="bar"></div>
				<!--滚动条-->
			</div>
		</div>
	</body>

</html>
<script src="public.js"></script>
<script type="text/javascript">
	//滚动比例：内容向上走的距离 / 滚动条向下滚动距离 = 内容高度-可视区高度 / 可视区高度 - 滚动条的高度

	//实现滑块的拖拽
	$id("bar").onmousedown=function(e){
		var e=e||event;
		var y=e.offsetY;
		document.onmousemove=function(e){
			var e=e||event;
			var t=e.pageY-y-$id("box").offsetTop;
			
			var top=$id("box").clientHeight-$id("bar").offsetHeight;
			t=t<0?0:(t>top?top:t);
			$id("bar").style.top=t+"px";
			
			var scroll=t*($id("content").offsetHeight-$id("box").offsetHeight)/($id("box").offsetHeight-$id("bar").offsetHeight);
			
			$id("content").style.top=-scroll+"px";
		}
		document.onmouseup=function(){
			document.onmousemove=null;
		}
	}
	

</script>