Tengo la tarea de iniciar 2 pdf en una sola página html y hacer la comparación del pdf uno al lado del otro, por lo que he creado 2 iframes para cada comparación, sin embargo, tengo un problema al sincronizar el comportamiento de la barra de desplazamiento, como cuando muevo la vertical barra de desplazamiento en la página web del lado izquierdo (iframe1), luego la barra de desplazamiento en la página web del lado derecho (iframe2) también se moverá. ¿Hay alguien que sepa cómo hacerlo? u otro método además de usar iframe, pero disponible para iniciar 2 páginas web y sincronizar la barra de desplazamiento? Gracias por adelantado.
Aquí está el código que estoy intentando
<html> <head> <script src="http://code.jquery.com/jquery-1.3.2.js"></script> <style> .container { width: 80%; height: 200px; margin: auto; padding: 10px; } .div1 { width: 15%; height: 200px; float: left; overflow:auto; border:1px solid black; } .div2 { margin-left: 15%; width: 15%; height: 200px; overflow:auto; border:1px solid black; } </style> <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()); }); $($("#iframe1").contents()).scroll(function(){ $($("#iframe2").contents()).scrollTop($(this).scrollTop()); }); }); </SCRIPT> </head> <body> <section class="container"> <div id="div1" class="div1"> <iframe id="iframe1" src="sample.pdf" style="width:600px; height:500px;"></iframe> </div> <div id="div2" class="div2"> <iframe id="iframe2" src="sample.pdf" style="width:600px; height:500px;"></iframe> </div> </section> </body> </html>