HTML Scroll Box

Un cuadro de desplazamiento HTML es un cuadro que agrega barras de desplazamiento al lado derecho e inferior cuando el contenido del cuadro es mayor que las dimensiones del cuadro. En otras palabras, si tiene un cuadro que puede caber alrededor de 50 palabras y tiene un texto de 200 palabras, un cuadro de desplazamiento HTML colocará barras de desplazamiento para que pueda ver las 150 palabras adicionales. En HTML estándar que simplemente empujaría el texto adicional fuera del cuadro.

Hacer un desplazamiento HTML es bastante fácil. Solo necesita establecer el ancho y la altura del elemento que desea desplazar y luego usar la propiedad de desbordamiento CSS para establecer cómo desea que ocurra el desplazamiento.

& lt; / img & gt ;
Hamza TArkkol / Getty Images

Qué hacer con el texto extra?

Cuando tiene más texto del que cabe en el espacio de su diseño, tiene algunas opciones:

Video destacado

• Reescriba el texto para que sea más corto y se ajuste.
• Permita que el texto fluya más allá de los límites y espere que el diseño pueda flexionarse para soportarlo.
• Cortar el texto donde se desborda.
• Agregue barras de desplazamiento (generalmente verticales para texto) para que el espacio se desplace para mostrar el texto adicional.

La mejor opción suele ser la última opción: crear un cuadro de texto de desplazamiento. Entonces el texto adicional aún se puede leer, pero su diseño no está comprometido.

HTML y CSS para esto serían:

& lt; pre / & gt ;
& lt; pre & gt; texto aquí….
& lt; / pre & gt ;
& lt; pre / & gt ;

El desbordamiento : automático; le dice al navegador que agregue barras de desplazamiento si es necesario para evitar que el texto desborde los límites del div. Pero para que esto funcione, también necesita las propiedades de estilo de ancho y alto establecidas en el div, para que haya límites para desbordarse.

También puede cortar el texto cambiando el desbordamiento: automático; a desbordamiento: oculto; Si deja de lado la propiedad de desbordamiento, el texto se extenderá sobre los límites del div.

Puede agregar barras de desplazamiento a más de solo texto

Si tiene una imagen grande que usted y amp; apos; le gustaría mostrar en un espacio más pequeño, puede agregar barras de desplazamiento a su alrededor de la misma manera que lo haría con el texto.

& lt; pre / & gt ;
& lt; pre / & gt ;

En este ejemplo, la imagen de 400×509 está dentro de un párrafo de 300×300.

Las tablas pueden beneficiarse de las barras de desplazamiento

Las tablas largas de información pueden ser muy difíciles de leer muy rápidamente, pero al colocarlas dentro de un div de tamaño limitado y luego agregar la propiedad de desbordamiento, puede generar tablas con muchos datos que no ocupan espacio extremo en su página.

La forma más fácil es como con las imágenes y el texto, solo agregue un div alrededor de la tabla, establezca el ancho y la altura de ese div y agregue la propiedad de desbordamiento:

& lt; pre / & gt ;
& lt; pre / & gt ;
& amp; amp; nbsp; & amp; amp; nbsp ;
& lt; pre / & gt ;
& lt; pre / & gt; Nombre
& lt; pre / & gt; Teléfono
& lt; pre / & gt ;
& lt; pre / & gt ;
& lt; pre / & gt ;
& lt; pre / & gt ;
& lt; pre / & gt; Jennifer
& lt; pre / & gt; 502-5366
& lt; pre / & gt ;
& lt; pre & gt ;….
& lt; / pre & gt ;
& lt; pre / & gt ;
& lt; pre / & gt ;
& lt; pre / & gt ;

Una cosa que sucede cuando haces esto es que generalmente aparece una barra de desplazamiento horizontal porque el navegador asume que el cromo de las barras de desplazamiento se superpone a la tabla. Hay muchas maneras de solucionar esto cambiando el ancho de la tabla y otras. Pero nuestro favorito es simplemente desactivar el desplazamiento horizontal con la propiedad CSS 3 overflow-x

Simplemente agregue overflow-x: oculto; al div, y eso eliminará la barra de desplazamiento horizontal. Asegúrese de probar esto, ya que puede haber contenido que desaparezca.

& lt; pre / & gt ;

Firefox admite el uso de las etiquetas TBODY para desbordamiento

Una característica realmente agradable del navegador Firefox es que puede usar la propiedad de desbordamiento en etiquetas de mesa internas como tbody y thead o tfoot. Esto significa que puede establecer barras de desplazamiento en el contenido de la tabla y las celdas del encabezado permanecen ancladas sobre ellas. Esto solo funciona en Firefox, lo cual es una lástima, pero es una buena característica si sus lectores solo usan Firefox. Navega a este ejemplo en Firefox para ver a qué me refiero.

& lt; pre & gt ;…NamePhoneJennifer502-5366
& lt; / pre & gt ;
& lt; pre / & gt ;
& lt; pre / & gt ;
& lt; pre / & gt; Nombre
& lt; pre / & gt; Teléfono
& lt; pre / & gt ;
& lt; pre / & gt ;
& lt; pre / & gt ;
& lt; pre / & gt ;
& lt; pre / & gt; Jennifer
& lt; pre / & gt; 502-5366
& lt; pre / & gt ;
& lt; pre & gt ;…
& lt; / pre & gt ;
& amp; # x203A; Informática