Блог

Главная - Вопросы по программированию - jQuery: как синхронизировать полосы прокрутки

jQuery: как синхронизировать полосы прокрутки

#javascript #jquery #iframe

#javascript #jquery #iframe

Вопрос:

Как мне синхронизировать две горизонтальные полосы прокрутки, если я использую два фрейма или iframes? Спасибо!

 <SCRIPT language="javascript" type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></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());
});

});
  

             <iframe id="div1" SRC="UserQueue_Header.asp?Occasion=<%=Occasion%>amp;GPL=<%=GPL%>" NAME="UserQueue_Header" width=100%>
                <p>Your browser does not support iframes.</p>
            </iframe>

            <iframe id="div2" SRC="UserQueue_Detail.asp?Occasion=<%=Occasion%>amp;GPL=<%=GPL%>" NAME="UserQueue_Detail" width=100%>
            </iframe>

Ответ №1:

Код не прослушивает событие прокрутки содержимого в iframe. Селектор должен выглядеть примерно так

 <html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<script>
//changed id since div is bad for iframes. :)
$(window).load( function(){
    var ifr1 = $( $('#iframe1').contents() );
    var ifr2 = $( $('#iframe2').contents() );

    ifr1.scroll( function(){ console.log("scroll");
         ifr2.scrollTop(ifr1.scrollTop());
         ifr2.scrollLeft(ifr1.scrollLeft());
    });

    ifr2.scroll( function(){
         ifr1.scrollTop(ifr2.scrollTop());
         ifr1.scrollLeft(ifr2.scrollLeft());
    });
});
</script>


<title>Test</title>
</head>
<body>
  <iframe src="test.html" id="iframe1"></iframe>
  <iframe src="test.html" id="iframe2"></iframe>
</body>
</html>

Комментарии:

1. Работает для меня с этой простой тестовой страницей. Отредактировал мой исходный пост с полным примером кода. Может быть проблема с неполной загрузкой фреймов?

Ответ №2:

Это работает для меня как в IE, так и в Firefox!

     <SCRIPT language="javascript" type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></SCRIPT>
  

 $(window).load( function(){

  var ifr1 = $(window.frames[0]);
  var ifr2 = $(window.frames[1]);

  ifr1.scroll( function(){ 

     ifr2.scrollLeft(ifr1.scrollLeft());
  });

  ifr2.scroll( function(){

     ifr1.scrollLeft(ifr2.scrollLeft());
  });
});

<frameset>
    <frame src="test.html"/>
    <frame src="test.html"/>
</frameset>

Ответ №3:

Это сработало для меня в Firefox, но не в IE.

 <SCRIPT language="javascript" type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></SCRIPT>
<SCRIPT language="javascript" type="text/javascript" src="jquery.frameready.js"></SCRIPT>
  

 $(document).ready(function()

{
// Sync Header Frame with Detail Frame`
$.frameReady( function() {

    var ifr2 = $(window.parent.document.getElementsByName('UserQueue_Detail')).contents();

   $(document).scroll( function(){

         ifr2.scrollLeft($(document).scrollLeft());
    });
  },
  "UserQueue_Header"
);

// Sync Detail Frame with Header Frame
$.frameReady( function() {

    var ifr1 = $(window.parent.document.getElementsByName('UserQueue_Header')).contents();

   $(document).scroll( function(){

         ifr1.scrollLeft($(document).scrollLeft());
    });
  },
  "UserQueue_Detail"
);

});