Comment synchroniser le défilement des postes pour plusieurs iframes

J'ai une mise en page HTML basé sur onglets (5).
Dans chaque onglet, je charge un iframe. Le contenu de l'iframe sont des variations de l'un à l'autre que l'utilisateur peut comparer par la commutation des onglets.

Comment puis-je, en javascript, de synchroniser le défilement de tous les iframes à la verticale et à l'horizontale?
En d'autres termes, le défilement dans une iframe défiler le même montant tous les autres iframes, permettant à l'utilisateur de comparer les mêmes données.

Points Bonus: iframe contenu est chargé uniquement lorsque l'utilisateur ouvre l'onglet pour la première fois. Donc, nouvellement ouvert iframes directement de défilement à la même place que déjà ouvert les iframes.

Grâce.

InformationsquelleAutor JB Hurteaux | 2009-04-17

Alors que cela fonctionne pour les divs, il ne fonctionne pas pour les iframes.

Voici ce que vous pouvez faire,

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

Avec jQuery événement scroll, vous devriez être en mesure de les synchroniser.

Modifier: Pas de plugins 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>

Merci beaucoup pour ce. Vous m'avez aidé à répondre à une question, j'ai demandé que personne ne pouvait répondre. stackoverflow.com/questions/7256086/...

InformationsquelleAutor Andrew Ensley

- Je synchroniser débordé div à l'aide d'un code comme ceci:

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

InformationsquelleAutor Tom Ritter

2

Accepté solution ne fonctionne que si les divs ont la même largeur.
Si non, il provoque une boucle infinie: #div1 parchemins #div2, puis le #div2 de l'événement scroll parchemins #div1 etc 🙂

Édité 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());
});
```
- Le fait de résoudre la boucle infinie problème? ISTM "sauter" bascule entre le vrai et le faux, à l'infini.
- Il résout boucle infinie problème: chaque deuxième appel sera ignorée. ("skip" variable flips, mais quand $("#div2").de défilement(...) l'appelle: il sera ignoré.)
- +1 pour le premier commentaire qui parle de la boucle infinie des problèmes lors de la mise à jour de scrolltop. J'ai trouvé Chrome et Firefox travail, sans l'ignorer, mais IE8 en a besoin ou ce qu'il se verrouille en place.
- Vous aurez probablement besoin d'un setTimeout() pour retarder feuilletant "skip"
InformationsquelleAutor steve

Je pense que cette réponse peut fixer 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;
});

Cette solution est la seule qui a résolu la boucle problème.

InformationsquelleAutor javie

De synchroniser un nombre arbitraire d'éléments d'utiliser le 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'aide c'est SUPER simple. Disons que vous avez plusieurs divs défini comme:

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

Pour synchroniser les barres de défilement " sur toutes 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

InformationsquelleAutor Giles Roberts

Vous devez vous connecter pour publier un commentaire.