Cómo agregar una barra de desplazamiento en CSS

Los navegadores son sólo objetos Web que pueden tener la capacidad de mostrar las barras de desplazamiento. Los desarrolladores web añaden a las barras de desplazamiento a DIV contenedores, así ajustando sus valores de propiedad de desbordamiento de CSS. Desde divs pueden contener otros elementos de la página Web, la adición de una barra de desplazamiento a un div permite a los usuarios desplazarse por los elementos. Mediante la creación de una función de JavaScript que modifica un valor de desbordamiento divs en tiempo real, usted puede hacer barras de desplazamiento aparecen como los usuarios interactúan con la aplicación Web.

Instrucciones

1

Pegue el código que se muestra a continuación en la sección del cuerpo de uno de los documentos HTML:

<Div id = clase "testDiv1" = "smallDiv">
aa aa aa aa aa aa aa aa aa aa aa aa aa aa aa aa aa aa aa aa aa aa aa aa aa aa aa aa aa aa aa aa
aa aa aa aa aa aa aa aa aa aa aa aa aa aa aa aa aa aa aa aa aa aa aa aa aa aa aa aa aa aa aa aa
aa aa aa aa aa aa aa aa aa aa aa aa aa aa aa aa aa aa aa aa aa aa aa aa aa aa aa aa aa aa aa aa
</ Div>

<Input type = valor "botón" = "Añadir barra de desplazamiento" onclick = "manageScollbar ('testDiv1', 'show');" />
<Input type = valor "botón" = "Eliminar la barra de desplazamiento" onclick = "manageScollbar ('testDiv1', 'ocultar');" />

Este código crea un bloque div que contiene el texto de ejemplo. Identificación de la div es "testDiv1." El div también hace referencia a una clase CSS llamado "smallDiv." Esta clase crea un pequeño div que no puede contener todo el texto. El primer control de botón llama a una función JavaScript llamada "manageScrollbar." El botón pasa valor id de la div a esa función, así como la palabra "show". El segundo botón llama a la misma función de JavaScript. Ese botón pasa la palabra "esconder" a la función. Los dos botones de mostrar y ocultar la barra de desplazamiento de la div cuando se hace clic.

2

Pegue el código CSS en la sección de estilo del documento para crear la clase smallDiv CSS.

.smallDiv {height: 100px; width: 100px;}

3

Agregue el código JavaScript se muestra a continuación a la sección de la escritura del documento:

manageScollbar función (div, acción) {

divObj = document.getElementById (div);
si (acción == "show")
divObj.style.overflow = "scroll";
más
divObj.style.overflow = "oculto";

}

Este código establece la propiedad de desbordamiento de la div a "desplazarse" si los usuarios hacen clic en el botón "Mostrar barra de desplazamiento". De lo contrario, se establece la propiedad de desbordamiento de "oculto".

4

Guarde el documento HTML y verlo en un navegador. Aparece el texto div que contiene. Haga clic en "Mostrar barra de desplazamiento." El código se ejecuta y hace que aparezca una barra de desplazamiento. Haga clic en "Ocultar barra de desplazamiento" para hacer desaparecer la barra de desplazamiento.