模拟滚动条控制内容的滚动

最新推荐文章于 2022-05-15 17:57:02 发布

长岛冰茶子

最新推荐文章于 2022-05-15 17:57:02 发布

阅读量631

点赞数

分类专栏：事件对象文章标签：模拟滚动条控制内容的滚动事件

本文链接：https://blog.csdn.net/Zhang_XiaoHeng/article/details/72771049

版权

事件对象专栏收录该内容

10 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>模拟滚动条控制内容的滚动</title>
	<style type="text/css">
		#div1{
			width:30px;
			height:500px;
			background:black;
			position: absolute;
			left:10px;
			top:10px;
		}
		#div2{
			width:30px;
			height:30px;
			background:red;
			position:absolute;
			left:0;
			top:0;
		}
		#div3{
			width:498px;
			height:498px;
			border:1px solid green;
			position: absolute;
			left: 50px;
			top:10px;
			overflow-y: hidden;
			background:black;
			color:#fff;
		}
		#div4{
			position: absolute;
			top:0;
			left: 0;
		}
	</style>
	<script type="text/javascript">
	 window.onload = function(){
		var oDiv1 = document.getElementById("div1");
		var oDiv2 = document.getElementById("div2");
		var oDiv3 = document.getElementById("div3");
		var oDiv4 = document.getElementById("div4");
		var iMaxTop = oDiv1.offsetHeight-oDiv2.offsetHeight;
		oDiv2.onmousedown = function(ev){
			var ev = ev || event;
			var disY = ev.clientY-this.offsetTop;
			document.onmousemove = function(ev){
				var ev = ev ||event;
				var valueT = ev.clientY-disY;
				if(valueT<0){
					valueT =0;
				}else if(valueT>iMaxTop){
					valueT=iMaxTop;
				}
				oDiv2.style.top = valueT +"px";
				var iscale = valueT/iMaxTop;
				oDiv4.style.top =  iscale*(oDiv3.clientHeight-oDiv4.offsetHeight)+"px";
			}
			document.onmouseup = function(){
				document.onmousemove =document.οnmοuseup=null;
			}
			return false;
		}
	 }
		
	 </script>
</head>
<body>
	<div id="div1">
		<div id="div2"></div>
	</div>
	<div id="div3">
		<div id="div4">
			文字...
		</div>
	</div>
</body>
</html>

效果：

长岛冰茶子

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
模拟滚动条控制内容的滚动

模拟滚动条控制内容的滚动 #div1{ width:30px; height:500px; background:black; position: absolute; left:10px; top:10px; } #div2{ width:30px; height:30px; background:red; positio
复制链接

扫一扫

专栏目录