Javascript 如何同步多个iFrame的滚动位置_Javascript_Html_Iframe

Javascript 如何同步多个iFrame的滚动位置

javascript html iframe

Javascript 如何同步多个iFrame的滚动位置,javascript,html,iframe,Javascript,Html,Iframe,我有一个基于标签的HTML布局（比如5）。在每个选项卡中，我加载一个iframe。iframe内容是彼此的变体，用户可以通过切换选项卡进行比较在javascript中，如何同步所有iFrame的垂直和水平滚动？换句话说，在一个iframe中滚动应该与在所有其他iframe中滚动相同的量，从而允许用户比较相同的数据优点：只有当用户第一次打开选项卡时，才会加载iframe内容。因此，新打开的iFrame应该直接滚动到与已打开的iFrame相同的位置谢谢。虽然这适用于div，但不适用于ifr

我有一个基于标签的HTML布局（比如5）。在每个选项卡中，我加载一个iframe。iframe内容是彼此的变体，用户可以通过切换选项卡进行比较

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

优点：只有当用户第一次打开选项卡时，才会加载iframe内容。因此，新打开的iFrame应该直接滚动到与已打开的iFrame相同的位置

谢谢。

虽然这适用于div，但不适用于iframe

这是你能做的

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

使用，您应该能够同步它们

编辑：不需要插件。以下是对我有效的代码：

<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>


$（文档）.ready（函数（）
{
$（“#div1”）.scroll（函数（）{
$（“#div2”）.scrollTop（$（“#div1”）.scrollTop（））；
$（“#div2”）.scrollLeft（$（“#div1”）.scrollLeft（））；
});
$（“#div2”）.scroll（函数（）{
$（“#div1”）.scrollTop（$（“#div2”）.scrollTop（））；
$（“#div1”）.scrollLeft（$（“#div2”）.scrollLeft（））；
});
});
试验



试验



试验



试验



试验



试验



试验



试验



试验



试验



试验



试验



试验



试验



试验



试验



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

var skip = false;
$("#div1").scroll(function () {
    if (skip){skip=false; return;} else skip=true; 
    $("#div2").scrollTop($("#div1").scrollTop());
    $("#div2").scrollLeft($("#div1").scrollLeft());
});
$("#div2").scroll(function () { 
    $("#div1").scrollTop($("#div2").scrollTop());
    $("#div1").scrollLeft($("#div2").scrollLeft());
});

jQuery.fn.synchroniseScroll = function() {

        var elements = this;
        if (elements.length <= 1) return;

        elements.scroll(
        function() {
            var left = $(this).scrollLeft();
            var top = $(this).scrollTop();
            elements.each(
            function() {
                if ($(this).scrollLeft() != left) $(this).scrollLeft(left);
                if ($(this).scrollTop() != top) $(this).scrollTop(top);
            }
            );
        });
    }

<div class=”scrollDiv” style=”overflow:auto;”> .. some large content</div>

$(“.scrollDiv”).synchroniseScroll();

      var jsScroll0;
      var jsScroll1;
      windows[0].on('scroll.scrollInTheSameTime', function() {
        if (jsScroll1 === true) {
          jsScroll1 = false;
          return;
        }
        jsScroll0 = true;
        windows[1].scrollTop(windows[0].scrollTop());
        windows[1].scrollLeft(windows[0].scrollLeft());
      });
      windows[1].on('scroll.scrollInTheSameTime', function() {
        if (jsScroll0 === true) {
          jsScroll0 = false;
          return;
        }
        jsScroll1 = true;
        windows[0].scrollTop(windows[1].scrollTop());
        windows[0].scrollLeft(windows[1].scrollLeft());
        // jsScroll = false;
      });