Tecnología

Inicio

JavaScript y Desplazamientos múltiples

JavaScript y Desplazamientos múltiples


Es probable que vea las barras de desplazamiento en las páginas web a menudo, pero no se puede ver muchos barras de desplazamiento en los objetos que aparecen en esas páginas. Es posible que los desarrolladores añadir barras de desplazamiento de elementos de la página Web. elementos div HTML utilizadas como contenedores, por ejemplo, pueden mostrar barras de desplazamiento que que se puede controlar a través de un programa. Mediante la creación de una simple función de JavaScript que altera una propiedad de HTML, puede hacer varias Div desplazarse a la vez siempre que lo desee.

div Contenedores

El siguiente ejemplo muestra una imagen y un botón colocado en una página web típica:

<Img src = "someImage.jpg" />
<Input type = "button" value = "botón" />

Coloque estos mismos objetos dentro de un div como se muestra a continuación para tratarlos como un grupo.

<Div id = "divToScrollID" class = "style1">
<Img src = "someImage.jpg" />
<Input type = "button" value = "botón" />
</ Div>

El div que encierra los objetos consiste en una etiqueta de apertura <div> y un cierre </ div> etiqueta. Aplicar un estilo CSS, tales como un borde, a la div y el borde aparece alrededor de los objetos de la div. Para hacer que todos los objetos desaparecen con el clic de un botón, sólo tiene que llamar a una función que hace que el div desaparecer mediante el establecimiento de la pantalla de la div atribuir a "ninguno.".

Las barras de desplazamiento

El div en el ejemplo anterior tiene un atributo id que identifica de manera única y un atributo de clase que apunta a una clase de hoja de estilo en cascada. Esa clase define las propiedades de visualización de la div. Hacer un div desplazable mediante la asignación de un valor de "auto" a su atributo de desbordamiento. Este valor hace que las barras de desplazamiento a aparecer si una imagen o cualquier otro objeto dentro de un div no se ajusta dentro de la div. Si desea barras de desplazamiento que aparezcan siempre, establezca el valor en "scroll" en su lugar.

dinámica de desplazamiento

Es posible que tenga un div que contiene contenido que sea necesario desplazarse sin intervención del usuario. Un documento de acuerdo de largo, por ejemplo, puede sentarse dentro de un div que los usuarios no pueden leer sin necesidad de desplazarse a la parte inferior. Puede hacer que el div desplazamiento a cualquier lugar llamando a una función de JavaScript con un código similar al que se muestra a continuación:

var divObject = document.getElementById ( "divToScrollID");
divObject.scrollTop = 100;

Este código se encuentra el div cuyo ID es "divToScrollID" y hace que se vaya a un lugar 100 píxeles desde el borde superior de ese div. Incluso se puede hacer que desplazarse hasta la parte superior de forma automática ajustando el valor scrollTop a cero.

Desplazamiento múltiple

Una página web puede contener tantas divs como sea necesario para mostrar su contenido. Una div podrá mantener una galería de imágenes, mientras que otro podría mostrar una historia corta. Una forma interesante de presentar dos de estos divs podría ser la de hacer que el texto de la historia desplazarse hacia abajo al mismo tiempo que las imágenes se desplazan. Crear este efecto llamando a una función que se desplaza dos divs como se muestra a continuación.

divObject1.scrollTop + = increment1;
divObject2.scrollTop + = increment2;

Si los valores de increment1 y increment2 fueron 20, cada clic de botón haría que ambos divs desplazarse hacia abajo 20 píxeles. Mediante el uso de dos variables para mantener sus valores de incremento, se puede hacer que cada div desplazamiento de forma independiente por una cantidad diferente.