Tecnología

Inicio

Cómo sincronizar Desplazamiento en jQuery

July 25

Cómo sincronizar Desplazamiento en jQuery


Muchos desarrolladores utilizan jQuery, ya que les permite colocar interesantes efectos visuales en sus páginas Web. También puede ayudar a mantener los elementos div sincronizados. Un div HTML es un recipiente útil que posee otros objetos en una página Web. Si tiene dos elementos div, puede utilizar jQuery para causar un div, el niño, para desplazarse al mover la barra de desplazamiento en el div padre. Esta capacidad podría ser útil, por ejemplo, cuando la visualización de texto en un div y las imágenes en otro. Un usuario puede simplemente desplazarse por el div que contiene el texto, y el div que contiene las imágenes se desplazará automáticamente.

Instrucciones

1 Bloc de notas de lanzamiento o un editor HTML. Abrir un documento HTML, y añadir el siguiente código JavaScript a la sección de la cabeza del documento:

<Script type = "text / javascript" src = "https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js&quot;> </ script>

Este código añade la biblioteca jQuery para la página Web.

2 Agregue este código a la sección de la escritura del documento:

var ParentObject = "My_Parent_Div";
var ChildObject = "My_Child_Div";

$ (Document) ready (function ()
{

var matriz = "#" + ParentObject;
var niño = "#" + ChildObject;

$ (Padre) .scroll (function () {

$ (Niño) .scrollLeft ($ (padre) .scrollLeft ());
$ (Niño) .scrollTop ($ (padre) .scrollTop ());

});
});

Reemplazar "My_Parent_Div" con el nombre de la div que controlará la barra de desplazamiento de otro div. Reemplazar "My_Child_Div" con el nombre de la div que controlará el div padre. Las funciones de jQuery scrollLeft y scrollTop hacen que el niño div para desplazarse cuando la barra de desplazamiento en el div padre se mueve.

3 Guarde el documento y verlo en un navegador. Haga clic en una de las barras de desplazamiento en su div padre, y arrastre la barra de desplazamiento. La barra de desplazamiento en el div niño se mueve también.

Consejos y advertencias

  • Recuerde que la función "listo" que se muestra en el código configura el comportamiento de desplazamiento cada vez que se carga la página Web. Para desactivar el desplazamiento automático, comentario el código que ha añadido al documento de página Web.