1

En mi pagina tengo dos capas (div) con scroll horizontal cada una... como puedo hacer para al mover un scroll el otro tambien se mueva para sincronizar la vista de ambas capas ?? introducir la descripción de la imagen aquí

 <div id="divGrid" align="center" style=" overflow-x:auto;" > 
 <div id="cc" align="center" style="position: fixed; top: 100px; left: 0px; right:0px; opacity: 0.8; display:none;  overflow-x:auto;"> 
 </div>

2
  • 1
    Sería más fácil de entender si compartieras algo de código.
    – Shaz
    Commented el 17 jul. 2016 a las 15:13
  • Shaz no hace falta...fijate si la pagina tiene dos capas (div) y cada capa tiene un scroll horizontal al mover un scroll el otro scroll tambien debe moverse ...de esa forma se sincronizan las vistas de las capas.... Commented el 17 jul. 2016 a las 15:18

3 respuestas 3

1

Como no pones código en la pregunta, voy a poner un ejemplo de cómo quedaría sincronizar dos div del mismo tamaño (aunque el código es escalable a cualquier número de divs):

La idea es poner un controlador del evento scroll en los div y cuando se lance, actualizar el resto de divs con la misma cantidad de scroll. Esto se puede hacer con scrollLeft() (sin parámetros para leer el valor del div en el que se ha hecho scroll, y con un valor para ajustar el scroll de los otros divs):

$(".contenedor").on("scroll", function() {
  $(".contenedor").scrollLeft($(this).scrollLeft());
});
.contenedor {
  height:50px;
  width:500px;
  border:1px solid gray;
  overflow:scroll;
}

.scroll {
  width:1000px;
  height:50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div class="contenedor">
  <div class="scroll"></div>
</div>

<div class="contenedor">
  <div class="scroll"></div>
</div>

6
  • hola y gracias Alvaro Montoro... fijate en esto veo que las div tienen la misma class esto no se puede hacer en mi ejemplo por q son diferentes .....no c puede hacer por el id de la div??? Commented el 17 jul. 2016 a las 19:28
  • voy a editar mi pregunta ..voy a agregar el codigo Commented el 17 jul. 2016 a las 19:29
  • aunque es exactmente la idea... Commented el 17 jul. 2016 a las 19:34
  • Cambia las clases en Los selectores y debería funcionar igual
    – Alvaro Montoro
    Commented el 17 jul. 2016 a las 19:49
  • si pudieras ser un poquito mas grafico soy nuevo en esto,.... Commented el 17 jul. 2016 a las 20:07
0

No se exactamente cuál es tu propósito y si he entendido bien tu pregunta, pero se me ocurre que metas los dos divs dentro de otro div y que sea éste último el que muevas, así se moverían los dos a la vez.

1
  • la idea es hacerlo con javascript o jquery ... Commented el 17 jul. 2016 a las 15:41
0

a cada div agregue el evento OnScroll que llama a una funcion JavaScript cuando existe dezplazamiento

esta son las funciones JavaScript

function ScrollCC() {
             var cc = document.getElementById('cc');
             var dg = document.getElementById('divGrid');
             dg.scrollLeft = cc.scrollLeft;
         }

y esta otra

function ScrollDG() {
             var cc = document.getElementById('cc');
             var dg = document.getElementById('divGrid');
             cc.scrollLeft = dg.scrollLeft;
         }

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.