Tecnología

Inicio

Extracción de una barra de desplazamiento vertical en JavaScript

May 16

Las barras de desplazamiento dan a los espectadores de su sitio web una manera fácil de navegar largos bloques de texto si no tienen monitores suficientemente grande para mostrar todo el contenido de forma simultánea, pero en un sitio web diseñado cuidadosamente barras de desplazamiento automáticos también pueden ser desagradables y poco. Debido a que las barras de desplazamiento pueden controlarse a través de CSS, que se puede quitar sobre la marcha a través de JavaScript, haciendo uso de "estilo" de JavaScript atributos.

Instrucciones

1 Abrir el código fuente de su página web en un editor HTML o un editor de texto como el que se incluye con el sistema operativo. En la cabecera de su página web (el código entre el "<head>" y "</ head>" etiquetas) agregue el código siguiente, se crea una función JavaScript para ocultar las barras de desplazamiento:

<Script type = "text / javascript">

<! -

hidescrollbars función (id) {

document.getElementById (id) .style.overflow = "oculto";

}

->

</ Script>

2 Desplazarse hacia abajo para el elemento de página que se representa actualmente con una barra de desplazamiento, y marca "id" del elemento; si no tiene uno, agregar una etiqueta única - por ejemplo: "<div id =" this_is_a_unique_id 'class =' ​​... 'style = "..."> "se asignará el" this_is_a_unique_id "Identificación de la div.

3 Añadir una nueva línea que sigue la etiqueta de cierre del elemento con una simple etiqueta <div> se utiliza para activar la ocultación de las barras de desplazamiento del otro elemento utilizando su ID único. Por ejemplo:

<Div style = "border: 2px sólido negro;" onclick = "hidescrollbars ( 'this_is_a_unique_id)"> Ocultar </ div>

Change "this_is_a_unique_id" al ID del elemento.

4 Guarde el archivo y abrir la página web en el navegador; cuando se hace clic en el botón "Ocultar" en el documento, la barra de desplazamiento vertical unida al otro elemento desaparecerá.

Consejos y advertencias

  • Los hidescrollbars () función puede ser llamada por otros eventos de JavaScript, así; por ejemplo, para ocultar la barra de desplazamiento de un elemento <div> cuando ese elemento cuando el lector se mueve el ratón sobre ella, agregue la línea "onmouseover = hidescrollbars ( 'this_is_a_unique_id')" como un atributo de la etiqueta de apertura de dicho elemento.
  • Para ocultar las barras de desplazamiento por defecto, o cuando se carga la página, el uso de CSS en lugar: en el interior etiqueta de apertura del elemento, agregue el atributo siguiente: "style =" overflow: hidden; "" para evitar que la barra de desplazamiento de la carga en el primer lugar.