How to synchronize scrolling positions for several iframes

Question

I have an HTML layout based on tabs (say 5). In each tab I load an iframe. The iframe contents are variations of one another that the user can compare by switching tabs.

How can I, in javascript, synchronize the scrolling of all iframes vertically and horizontally? In other words, scrolling in one iframe should scroll by the same amount all other iframes, allowing the user to compare the same data.

Bonus points: iframe content is loaded only when the user opens the tab for the first time. So newly opened iframes should directly scroll to the same place as already opened iframes.

Thanks.

score 20 · Accepted Answer · edited Oct 08 '15 at 17:32

While this works for divs, it does not work for iframes.

Here's what you can do,

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

With jQuery's scroll event, you should be able to synchronize them.

Edit: No plugins required. Here's the code that worked for me:

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

Thanks alot for this. You helped me answer a question I asked that nobody there could answer. http://stackoverflow.com/questions/7256086/how-can-i-make-2-divs-scroll-at-the-same-time/ — desbest, Sep 02 '11 at 16:03

score 7 · Answer 2 · answered Apr 17 '09 at 21:37

7

I synchronize overflowed div's using code like this:

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

answered Apr 17 '09 at 21:37

Tom Ritter

99,986
30
138
174

score 2 · Answer 3 · answered Dec 04 '12 at 12:44

2

Accepted solution works only if divs have the same width. If not, it causes an infinite loop: #div1 scrolls #div2, then #div2's scroll event scrolls #div1 etc :)

Edited solution:

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());
});

answered Dec 04 '12 at 12:44

steve

615
6
14

1

Does that solve the infinite loop problem? ISTM "skip" flips between true and false infinitely. – Dominator008 Aug 18 '13 at 08:03
It solves infinite loop problem: every second call will be skipped. ("skip" variable flips, but when $("#div2").scroll(...) calls it: it will be skipped.) – steve Aug 21 '13 at 07:13
1

+1 for first comment that talks about infinite loop issues when updating scrolltop. I found Chrome and Firefox work without the skip but IE8 needs it or it locks up. – mbokil Sep 02 '13 at 19:59
You will probably need a setTimeout() to delay flipping "skip" – Dominator008 Sep 15 '13 at 10:40

score 2 · Answer 4 · answered Oct 10 '13 at 06:49

I think this answer can fix the infinite loop.

      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;
      });

score 0 · Answer 5 · answered Aug 30 '13 at 15:48

To synchronise an arbitrary number of elements use the following code:

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);
            }
            );
        });
    }

Using this is SUPER simple. Lets say you have several divs defined as:

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

To synchronize the scrollbars’ on all divs with the class scrollDiv all you need to write is:

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

Source: http://blogs.msdn.com/b/matt/archive/2009/03/19/synchronizing-scrollbars-using-jquery.aspx

How to synchronize scrolling positions for several iframes

5 Answers5

Linked

Related