[急]用JS将两个滚动条绑定

Neether 2014-02-19 08:57:18

想用js将两个滚动条互相绑定
问题在于如果只是div1滚动的时候div2滚动，div2滚动div1不动的话很简单
如果要两个互相都能产生这样的效果就很难。
如果只是设定onscroll事件就会出现不能滚动的现象。因为两个滚动条的事件在互相的调用

如果用onmouseover来绑定和解除onscroll。用鼠标的滚轮是好的，但是如果直接拖动滚动条则无法触发onmouseover事件

大家给点方法吧

...全文

282 3 打赏收藏转发到动态举报

写回复

用AI写文章

3 条回复

切换为时间正序

请发表友善的回复…

发表回复

whatisma 2014-02-20

打赏
举报

直接看demo:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
		<title>test</title>
	</head>

	<body>
	  	<div id="d1" style="width:200px;height:300px;overflow:auto;float:left;border:solid 1px red;" onscroll="scroll1()">
	  	<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
	  	<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
	  	</div>
	  	<div id="d2" style="width:200px;height:300px;overflow:auto;float:left;border:solid 1px green;" onscroll="scroll2()">
	  	<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
	  	<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
	  	</div>
	  	<script type="text/javascript">
	  	var target=0;
	  	var d1=document.getElementById("d1");
		var d2=document.getElementById("d2");
		function scroll1(){
			if(target==2)return;
			target=1;
			d2.scrollTop=d1.scrollTop;
			target=0;
		}
		function scroll2(){
			if(target==1)return;
			target=2;
			d1.scrollTop=d2.scrollTop;
			target=0;
		}
	  	</script>
	</body>
</html>