如何同步几个iframe的滚动位置

Question

如何同步几个iframe的滚动位置

JB *_*aux 14 html javascript iframe

我有一个基于标签的HTML布局(比如5).在每个标签中,我加载了一个iframe.iframe内容是用户可以通过切换标签进行比较的彼此的变体.

我如何在javascript中垂直和水平同步所有iframe的滚动？换句话说,在一个iframe中滚动应该滚动所有其他iframe的相同数量,允许用户比较相同的数据.

加分:iframe内容仅在用户首次打开选项卡时加载.所以新打开的iframe应该直接滚动到已经打开的iframe的同一个地方.

谢谢.

Answer 1

And*_*ley 20

虽然这适用于div,但它不适用于iframe.

这是你能做的,

$($('#iframe1').contents()).scroll(function(){
    $($('#iframe2').contents()).scrollTop($(this).scrollTop());
});

Run Code Online (Sandbox Code Playgroud)

使用jQuery的scroll事件,您应该能够同步它们.

编辑:无需插件.这是适合我的代码:

<html>
<head>
<SCRIPT language="javascript" type="text/javascript" src="jquery-1.3.2.js"></SCRIPT>
<SCRIPT>
$(document).ready(function()
{
$("#div1").scroll(function () { 
        $("#div2").scrollTop($("#div1").scrollTop());
        $("#div2").scrollLeft($("#div1").scrollLeft());
    });
$("#div2").scroll(function () { 
        $("#div1").scrollTop($("#div2").scrollTop());
        $("#div1").scrollLeft($("#div2").scrollLeft());
    });

});

</SCRIPT>
</head>
<body>
<div id="div1" style="overflow:auto;height:100px;width:200px;border:1px solid black;">
Test..................................................................................................................................................................................................................................................................................test
<BR/><BR/>
Test..................................................................................................................................................................................................................................................................................test
<BR/><BR/>
Test..................................................................................................................................................................................................................................................................................test
<BR/><BR/>
Test..................................................................................................................................................................................................................................................................................test
<BR/><BR/>
Test..................................................................................................................................................................................................................................................................................test
<BR/><BR/>
Test..................................................................................................................................................................................................................................................................................test
<BR/><BR/>
Test..................................................................................................................................................................................................................................................................................test
<BR/><BR/>
Test..................................................................................................................................................................................................................................................................................test
<BR/><BR/>
Test..................................................................................................................................................................................................................................................................................test
<BR/><BR/>
Test..................................................................................................................................................................................................................................................................................test
<BR/><BR/>
Test..................................................................................................................................................................................................................................................................................test
<BR/><BR/>
Test..................................................................................................................................................................................................................................................................................test
<BR/><BR/>
Test..................................................................................................................................................................................................................................................................................test
<BR/><BR/>
Test..................................................................................................................................................................................................................................................................................test
<BR/><BR/>
Test..................................................................................................................................................................................................................................................................................test
<BR/><BR/>
</div>

<div id="div2" style="overflow:auto;height:100px;width:200px;border:1px solid black;">
Test..................................................................................................................................................................................................................................................................................test
<BR/><BR/>
Test..................................................................................................................................................................................................................................................................................test
<BR/><BR/>
Test..................................................................................................................................................................................................................................................................................test
<BR/><BR/>
Test..................................................................................................................................................................................................................................................................................test
<BR/><BR/>
Test..................................................................................................................................................................................................................................................................................test
<BR/><BR/>
Test..................................................................................................................................................................................................................................................................................test
<BR/><BR/>
Test..................................................................................................................................................................................................................................................................................test
<BR/><BR/>
Test..................................................................................................................................................................................................................................................................................test
<BR/><BR/>
Test..................................................................................................................................................................................................................................................................................test
<BR/><BR/>
Test..................................................................................................................................................................................................................................................................................test
<BR/><BR/>
Test..................................................................................................................................................................................................................................................................................test
<BR/><BR/>
Test..................................................................................................................................................................................................................................................................................test
<BR/><BR/>
Test..................................................................................................................................................................................................................................................................................test
<BR/><BR/>
Test..................................................................................................................................................................................................................................................................................test
<BR/><BR/>
Test..................................................................................................................................................................................................................................................................................test
<BR/><BR/>
</div>

</body>
</html>

Run Code Online (Sandbox Code Playgroud)

Answer 2

Tom*_*ter 7

我用这样的代码同步溢出的div:

frame1.onscroll = function(e) {
   frame2.scrollTop = frame1.scrollTop;
   frame2.scrollLeft = frame1.scrollLeft;
 };

Run Code Online (Sandbox Code Playgroud)

归档时间：	16 年，7 月前
查看次数：	16717 次
最近记录：	10 年，1 月前