Как синхронизировать позиции прокрутки для нескольких фреймов

У меня есть HTML-макет на основе вкладок (скажем, 5). На каждой вкладке я загружаю iframe. Содержимое iframe представляет собой вариации друг друга, которые пользователь может сравнить, переключая вкладки.

Как я могу в javascript синхронизировать прокрутку всех iframe по вертикали и по горизонтали? Другими словами, прокрутка в одном iframe должна прокручивать на ту же сумму все остальные фреймы, позволяя пользователю сравнивать одни и те же данные.

Бонусные баллы: содержимое iframe загружается только тогда, когда пользователь открывает вкладку в первый раз. Таким образом, только что открытые iframes должны непосредственно прокручиваться до того же места, что и открытые iframes.

Спасибо.

Ответы

Ответ 1

Пока это работает для div, это не работает для iframes.

Вот что вы можете сделать,

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

С событие прокрутки jQuery, вы должны иметь возможность синхронизировать их.

Изменить: плагинов не требуется. Вот код, который работал у меня:

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

Ответ 2

Я синхронизирую переполненный div, используя следующий код:

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

Ответ 3

Принятое решение работает только в том случае, если divs имеют одинаковую ширину. Если нет, это вызывает бесконечный цикл: # div1 прокручивает # div2, затем # div2 прокручивает прокрутки событий # div1 и т.д.:)

Отредактированное решение:

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

Ответ 4

Я думаю, что этот ответ может исправить бесконечный цикл.

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

Ответ 5

Для синхронизации произвольного количества элементов используйте следующий код:

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

Используя это SUPER просто. Допустим, у вас есть несколько divs, определенных как:

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

Чтобы синхронизировать полосы прокрутки во всех div с классом scrollDiv, все, что вам нужно написать:

$(".scrollDiv").synchroniseScroll();

Источник: http://blogs.msdn.com/b/matt/archive/2009/03/19/synchronizing-scrollbars-using-jquery.aspx