Cómo sincronizar las posiciones de desplazamiento para varios iframes

Tengo un diseño HTML basado en pestañas (digamos 5). En cada pestaña cargo un iframe. Los contenidos del iframe son variaciones entre sí que el usuario puede comparar al cambiar de pestaña.Cómo sincronizar las posiciones de desplazamiento para varios iframes

¿Cómo puedo, en javascript, sincronizar el desplazamiento de todos los iframes vertical y horizontalmente? En otras palabras, el desplazamiento en un iframe debería desplazarse por la misma cantidad que los demás iframes, lo que permite al usuario comparar los mismos datos.

Puntos de bonificación: el contenido del iframe se carga solo cuando el usuario abre la pestaña por primera vez. Por lo tanto, los iframes recién abiertos deben desplazarse directamente al mismo lugar que los iframes ya abiertos.

Gracias.

Fuente

2009-04-17 JB Hurteaux

Aunque esto funciona para divs, no funciona para iframes.

Esto es lo que puede hacer,

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

Con jQuery's scroll event, usted debería ser capaz de sincronizar ellos.

Editar: No se requieren complementos. Aquí está el código que funcionó para mí:

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

Fuente

2009-04-17 21:36:45

Muchas gracias por esto. Me ayudaste a responder una pregunta que pedí que nadie allí pudiera responder. http://stackoverflow.com/questions/7256086/how-can-i-make-2-divs-scroll-at-the-same-time/ – desbest

simultaneo de desbordamiento del div utilizando código como este:

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

Fuente

2009-04-17 21:37:11

solución aceptada sólo funciona si divs tienen la misma anchura. Si no, se produce un bucle infinito: Se desplaza # Div1 # div2, a continuación, # de Div2 desplaza evento de desplazamiento # div1 etc :)

solución Editado:

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

Fuente

2012-12-04 12:44:09 steve

¿Resuelve esto el problema del bucle infinito? ISTM "skip" voltea entre verdadero y falso infinitamente. – Dominator008

Resuelve el problema de bucle infinito: cada segunda llamada se saltará. (La variable "skip" se voltea, pero cuando $ ("# div2"). scroll (...) la llama: se omitirá.) – steve

+1 para el primer comentario que habla sobre problemas de bucle infinito al actualizar scrolltop.Descubrí que Chrome y Firefox funcionan sin el salto, pero IE8 lo necesita o se bloquea. – mbokil

Para sincronizar un número arbitrario de elementos utilizan el código siguiente:

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

Usando esto es SUPER simple. Digamos que tiene varios divs definidos como:

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

para sincronizar las barras de desplazamiento en todos los divs con la clase scrollDiv todo lo que necesita para escribir es:

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

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

Fuente

2013-08-30 15:48:07

I piense que esta respuesta puede arreglar el ciclo infinito.

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

Fuente

2013-10-10 06:49:59 javie

Esta solución es la única que resolvió el problema del lazo. – shuji

Cómo sincronizar las posiciones de desplazamiento para varios iframes

Respuesta

Cuestiones relacionadas