Sincronizar scroll de dos divs con JavaScript

jQuery

En caso de que tengas dos divs de distinto tamaño puede que en ocasiones quieras que al hacer scroll ambos lo hagan a la vez pero a distinta velocidad dependiendo de su tamaño. Por ejemplo, podrías tener texto en uno e imágenes en otro y querer que al llegar al final ambos lo hagan a la vez. Para lograrlo, lo haremos con la librería jQuery de JavaScript. Si no sabes cómo utilizar jQuery, consulta primero el tutorial de introducción a jQuery.

Para sincronizar las posiciones de scroll podemos utilizar .scrollTop() para saber la posición del contenido con respecto a la parte superior de la página.

Primero colocamos el div pagina con el contenido principal y luego el div bloque con el contenido secundario que hará scroll con respecto al principal según su posición. Este segundo div tendrá que tener un a posición fija respecto a la página. Es decir, que en su CSS deberá contener el artributo «position: fixed».

<div id="pagina">
  <p class="cabeceraPagina">CABECERA PAGINA</p>
  <p>Aquí un texto largo</p>
  .........
  <p>Aquí más párrafos</p>
  <p> class="piePagina">PIE PAGINA</p>
</div>

<div id="bloque">
  <div id="alturaBloque">
    <p class="cabeceraBloque">CABECERA BLOQUE</p>
    <p>Aquí un texto largo</p>
    .........
    <p>Aquí más párrafos</p>
    <p class="pieBloque">PIE BLOQUE</p>
  </div>
</div>

Vamos ahora con el código JavaScript. En pageH obtenemos la diferencia entre la altura del div pagina y la altura de la ventana para calcular la altura del contenido no visible. En pagT obtenemos la posición de scroll de la ventana menos la altura que ya hemos avanzado en el div pagina. Finalmente movemos el div bloque lo correspondiente con respecto al div pagina para que se muevan la misma distancia proporcional en base a su altura.

$(window).scroll(function() {
    var pagH = $('#pagina').height() - $(this).height();
    var pagT = this.scrollY - $('#pagina').offset().top;
    $('#bloque').scrollTop(pagT / pagH * ($('#alturaBloque').height() - $(this).height()));
});

Los estilos de los divs son los siguientes:

body {
  position: relative;
  margin: 0 auto;
}

#pagina {
  position:relative;
  width: 550px;
}

#pagina p {
  text-align: justify;
}

#bloque {
  background: #027EBA;
  display: block;
  width: 200px;
  height: 100%;
  position: fixed;
  right: 20px;
  top:0;
  overflow: hidden;
}

.cabeceraPagina, .piePagina {
  display: block;
  width: 100%;
  margin: 0 auto;
  background: red;
  color: white;
  font-weight: bold;
  font-size: 16px;
}

.cabeceraBloque, .pieBloque {
  display: block;
  width: 100%;
  margin: 0 auto;
  background: green;
  color: white;
  font-weight: bold;
  font-size: 16px;
}

Es importante que no nos olvidemos de agregar jQuery. Aquí os dejo el enlace al fiddle con el código funcionando.


Avatar de Edu Lazaro

Edu Lázaro: Ingeniero técnico en informática, actualmente trabajo como desarrollador web y programador de videojuegos.

👋 Hola! Soy Edu, me encanta crear cosas y he redactado esta guía. Si te ha resultado útil, el mayor favor que me podrías hacer es el de compatirla en Twitter 😊

Si quieres conocer mis proyectos, sígueme en Twitter.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

“- Hey, Doc. No tenemos suficiente carretera para ir a 140/h km. - ¿Carretera? A donde vamos, no necesitaremos carreteras.”