Cuadro de desplazamiento HTML
Cree un cuadro con texto desplazable usando CSS y HTML
Un HTML el cuadro de desplazamiento es un cuadro que agrega barras de desplazamiento en el lado derecho y en la parte inferior cuando el contenido del cuadro es más grande 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 hacia arriba para permitirle ver las 150 palabras adicionales. En HTML estándar, eso simplemente empujaría el texto adicional fuera del cuadro.
Hacer scroll HTML es bastante fácil. Solo necesita establecer el ancho y altura del elemento que desea desplazar y luego use el CSS propiedad de desbordamiento para establecer cómo desea que se produzca el desplazamiento.
Imágenes de Hamza TArkkol/Getty
¿Qué hacer con el texto adicional?
Cuando tiene más texto del que cabe en el espacio de su diseño, tiene algunas opciones:
- Vuelva a escribir el texto para que sea más corto y quepa.
- Permita que el texto fluya más allá de los límites y espere que el diseño pueda flexionarse para admitirlo.
- Corta el texto donde se desborda.
- Agregue barras de desplazamiento (generalmente verticales para el 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 desplazable. Entonces, el texto adicional todavía se puede leer, pero su diseño no se ve comprometido.
HTML y CSS para esto sería:
|_+_| |_+_| |_+_|los desbordamiento: automático; le dice al navegador que agregue barras de desplazamiento si son necesarias para evitar que el texto se desborde de 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, de modo que haya límites para desbordar.
También puede cortar el texto cambiando overflow: auto; a desbordamiento: oculto; Si omite la propiedad de desbordamiento, el texto sobrepasará los límites del div.
Puede Agregar Barras de Desplazamiento a Más que Solo Texto
Si tiene una imagen grande que 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.
|_+_| |_+_|
En este ejemplo, la imagen de 400x509 está dentro de un párrafo de 300x300.
Las tablas pueden beneficiarse de las barras de desplazamiento
Las tablas largas de información pueden volverse 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 una gran cantidad de datos que no ocupan mucho espacio en su página.
La forma más fácil es como con las imágenes y el texto, simplemente agregue un div alrededor de la tabla, establezca el ancho y el alto de ese div y agregue la propiedad de desbordamiento:
|_+_| |_+_|Una cosa que sucede cuando hace 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 formas de solucionar esto, desde cambiar el ancho de la tabla y demás. Pero nuestro favorito es simplemente desactivar el desplazamiento horizontal con la propiedad CSS 3 desbordamiento-x
Solo agrega desbordamiento-x: oculto; al div, y eso eliminará la barra de desplazamiento horizontal. Asegúrese de probar esto, ya que puede haber contenido que desaparezca.
|_+_|Firefox admite el uso de etiquetas TBODY para desbordamiento
Una característica realmente interesante del navegador Firefox es que puede usar la propiedad de desbordamiento en etiquetas de tablas internas como tbody y thead o tfoot. Esto significa que puede configurar barras de desplazamiento en el contenido de la tabla y las celdas de encabezado permanecen ancladas sobre ellas. Esto solo funciona en Firefox, lo cual es una lástima, pero es una buena característica si tus lectores solo usan Firefox. Busque este ejemplo en Firefox para ver a qué me refiero.
|_+_| |_+_||_+_|