Comment synchroniser des positions de défilement pour plusieurs iframes

J'ai une mise en page HTML basée sur des onglets (disons 5). Dans chaque onglet, je charge un iframe. Les contenus iframe sont des variantes les uns des autres que l'utilisateur peut comparer en changeant de tabulation.Comment synchroniser des positions de défilement pour plusieurs iframes

Comment puis-je, en javascript, synchroniser le défilement de toutes les iframes verticalement et horizontalement? En d'autres termes, le défilement dans un iframe doit faire défiler de la même manière toutes les autres iframes, ce qui permet à l'utilisateur de comparer les mêmes données. Points bonus: le contenu iframe est chargé uniquement lorsque l'utilisateur ouvre l'onglet pour la première fois. Les iframes nouvellement ouverts devraient donc directement défiler au même endroit que les iframes déjà ouvertes.

Merci.

Source

2009-04-17 JB Hurteaux

Bien que cela fonctionne pour les divs, cela ne fonctionne pas pour les iframes.

Voici ce que vous pouvez faire,

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

Avec jQuery's scroll event, vous devriez être en mesure de les synchroniser.

Édition: Aucun plugin requis. Voici le code qui a fonctionné pour moi:

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

Source

2009-04-17 21:36:45

Merci beaucoup pour cela. Vous m'avez aidé à répondre à une question que j'ai posée à laquelle personne ne pouvait répondre. http://stackoverflow.com/questions/7256086/how-can-i-make-2-divs-scroll-at-the-same-time/ – desbest

synchroniser débordés div années en utilisant le code comme ceci:

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

Source

2009-04-17 21:37:11

solution acceptée ne fonctionne que si divs ont la même largeur. Sinon, il provoque une boucle infinie: # défile div1 # div2, puis # événement de défilement de DIV2 défile # les div1 etc :)

solution Edité:

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

Source

2012-12-04 12:44:09 steve

Est-ce que cela résout le problème de la boucle infinie? ISTM "skip" bascule entre true et false infiniment. – Dominator008

Il résout le problème de boucle infinie: chaque deuxième appel sera ignoré. (La variable "skip" bascule, mais quand $ ("# div2"). scroll (...) l'appelle: elle sera ignorée.) – steve

+1 pour le premier commentaire qui parle de problèmes de boucle infinis lors de la mise à jour de scrolltop.J'ai trouvé que Chrome et Firefox fonctionnaient sans le skip mais IE8 en a besoin ou il se bloque. – mbokil

Pour synchroniser un nombre arbitraire d'éléments utilisent la code suivant:

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

L'utilisation de ceci est SUPER simple. Disons que vous avez plusieurs divs définis comme:

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

Pour synchroniser les barres de défilement sur tous les divs avec la classe scrollDiv tout ce que vous devez écrire est:

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

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

Source

2013-08-30 15:48:07

I pense que cette réponse peut réparer la boucle infinie.

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

Source

2013-10-10 06:49:59 javie

Cette solution est la seule qui a résolu le problème de boucle. – shuji

Comment synchroniser des positions de défilement pour plusieurs iframes

Répondre

Questions connexes