Cuando el contenido de una caja es mayor que sus dimensiones se pueden agregar barras de desplazamiento (scroll bar) que permitirán al usuario moverse hacia los lados y hacia arriba o abajo en una página web, cuadro de texto, imagen, etc. Normalmente se presenta a la derecha (scroll bar vertical) porque ofrece una imagen más clara y dinámica o/y en la parte inferior (scroll bar horizontal) de la caja.
Para el caso concreto de un blog sus usos son variados y se pueden incluir en los gadgets de la plantilla.
Por ejemplo, es muy útil incluir scrollbar en los gadgets de etiquetas o de archivo del blog cuando la lista es extensa. También puede resultar interesante añadir barras de desplazamiento en las cajas de texto. En muchas ocasiones las entradas contienen texto o imágenes que no es necesario visualizar por completo y que pueden molestar o cansar al visitante o lector del blog al tener que desplazarse por la pantalla para saltarlo si no es de su interés.
Presentar este tipo de contenido en una ventana con barra de desplazamiento "scroll bar" (vertical en la zona lateral derecha, horizontal en la zona inferior o ambas) que permita al usuario moverse por el área desplazable, mejora la velocidad de carga de la página, la experiencia del usuario, la usabilidad del blog y ayudará a reducir el porcentaje de rebotes mejorando el SEO.
A pesar de las ventajas que ofrece, puede ocasionar también inconvenientes y molestias al usuario si lo obligamos en exceso a hacer uso de las barras de desplazamiento para acceder al contenido.
Por ejemplo, en este blog incluyo en algunas entradas extensos cuadros con código que no es necesario mostrar en su totalidad pero sí debe ser accesible y fácil de localizar.
Voy a probar las barras de desplazamiento en este tipo de cuadros.
Propiedad overflow
Indica al navegador cómo debe actuar cuando el contenido de una caja excede su área: ancho (propiedad width) y alto (propiedad height). Si no se establecen los valores para las propiedades de ancho y alto tendrán por defecto el valor auto, lo que supone que el navegador adaptará el contenido para que sea visible por completo.
Valores de overflow
🌑 visible
No se recorta el contenido que será visible aunque desborde la caja.
🌑 auto
Dependerá del navegador, en la mayoría equivale a scroll. Solo cuando el contenido excede su área, el navegador lo recorta y muestra la barra de desplazamiento para evitar que el texto desborde los límites establecidos en la etiqueta <div>.
- Si el contenido sobresale por el lado derecho, muestra la barra scroll horizontal.
- Si sobresale por la parte inferior, muestra la barra scroll vertical.
- Si sobresale por ambos lados, muestra las dos barras de desplazamiento (horizontal y vertical).
- Si no sobresale, no muestra ninguna barra de desplazamiento.
🌑 scroll
Se recorta el contenido y se muestra barra de desplazamiento aunque no exista desbordamiento.
🌑 hidden
Se recorta y se oculta el contenido sin mostar barra de desplazamiento.
Ejemplo de caja de texto con barra de desplazamiento vertical
Ejemplo de ventana con barra de desplazamiento vertical mediante la propiedad:
overflow-y:valor scroll
Código HTML a incluir dentro de la etiqueta <div> que define el bloque o caja con el contenido del texto con marco azul.
<div style="background-color: white; border: 2.5px solid #b0c4de; color: navy; font-family: 'calibri'; font-size: 18px; height: 85px; margin: 0px 75px 0px 75px; overflow-y: scroll; padding: 30px; text-align: left;">texto contenido de la caja</div>
overflow-y:valor scroll
Código HTML a incluir dentro de la etiqueta <div> que define el bloque o caja con el contenido del texto con marco azul.
<div style="background-color: white; border: 2.5px solid #b0c4de; color: navy; font-family: 'calibri'; font-size: 18px; height: 85px; margin: 0px 75px 0px 75px; overflow-y: scroll; padding: 30px; text-align: left;">texto contenido de la caja</div>
Dentro de la etiqueta <div style>, que define el estilo de la caja de texto, añado las siguientes propiedades:
height:85px; Altura de la caja.
overflow-y:scroll; Cuando el contenido desborde o no el área asignada, se muestra una barra de desplazamiento vertical (vertical scroll bar).
Como no está definido el ancho de la caja, su valor por defecto es auto (width: auto;) por lo que el navegador ajusta su contenido a los margenes establecidos (derecho 75px - izquierdo 75px).
Como no está definido el ancho de la caja, su valor por defecto es auto (width: auto;) por lo que el navegador ajusta su contenido a los margenes establecidos (derecho 75px - izquierdo 75px).
Ejemplo de caja de texto con barra de desplazamiento horizontal
He añadido a la etiqueta <div style>:
height:85px; Altura de la caja.
overflow-x:scroll; Cuando el contenido desborde o no el área asignada, se muestra una barra de
desplazamiento horizontal (horizontal scroll bar).
overflow-y:hidden; Cuando el contenido desborde el área asignada, se recorta pero no se muestra una barra de desplazamiento vertical (vertical scroll bar). En este ejemplo se ve cómo el contenido que excede la altura de 85px se recorta y como no muestra barra de desplazamiento no podemos acceder al contenido excedente.
overflow-y:hidden; Cuando el contenido desborde el área asignada, se recorta pero no se muestra una barra de desplazamiento vertical (vertical scroll bar). En este ejemplo se ve cómo el contenido que excede la altura de 85px se recorta y como no muestra barra de desplazamiento no podemos acceder al contenido excedente.
white-space: nowrap; No se tienen en cuenta los espacios en blanco ni los saltos de línea originales (para que el contenido desborde la caja).
Para poder ver el resto del contenido hay que modificar la altura:
height:180px; Altura de la caja.
Ahora ya es posible ver todo el contenido de la caja.
Propiedad white-space
Esta propiedad controla el comportamiento de los espacios en blanco dentro de un elemento.
Sus valores son,
🌑 normal : No tiene en cuenta los espacios en blanco sobrantes ni los saltos de línea originales pero añade nuevos saltos de línea para que el contenido no salga del elemento contenedor.
🌑 pre : Muestra los espacios en blanco sobrantes y los saltos de línea originales. Esto puede ocasionar que el contenido salga del elemento contenedor.
🌑 nowrap : No tiene en cuenta los espacios en blanco sobrantes ni los saltos de
línea originales (como el valor "normal") pero no añade nuevos saltos de línea, lo que puede provocar que el contenido salga del elemento contenedor.
🌑 pre-wrap : Muestra los espacios en blanco y los
saltos de línea originales (como el valor "pre") pero añade nuevos saltos de línea para que el contenido no salga del elemento contenedor.
🌑 pre-line : No tiene en cuenta los espacios en blanco sobrantes pero sí muestra los saltos de línea originales y añade nuevos saltos de línea para que el contenido no salga del elemento contenedor.
Ejemplo de caja de texto con barra de desplazamiento horizontal y vertical
Ejemplo de ventana con barra de desplazamiento horizontal y vertical mediante la propiedad:
overflow:valor auto
Código HTML a incluir dentro de la etiqueta <div> que define el bloque o caja con el contenido del texto con marco azul.
<div style="background-color: white; border: 2.5px solid #b0c4de; color: navy; font-family: 'calibri'; font-size: 18px; height: 100px; margin: 0px 75px 0px 75px; overflow: auto; padding: 30px; text-align: left; white-space:nowrap;">texto contenido de la caja</div>
overflow:valor auto
Código HTML a incluir dentro de la etiqueta <div> que define el bloque o caja con el contenido del texto con marco azul.
<div style="background-color: white; border: 2.5px solid #b0c4de; color: navy; font-family: 'calibri'; font-size: 18px; height: 100px; margin: 0px 75px 0px 75px; overflow: auto; padding: 30px; text-align: left; white-space:nowrap;">texto contenido de la caja</div>
Las propiedades que añado en este ejemplo a la etiqueta <div style> son:
height:100px; Altura de la caja.
overflow:auto; Recorta el contenido y se muestra la barra de desplazamiento horizontal y/o vertical solo cuando el contenido excede su área. Si no sobresale, no recorta el contenido ni muestra
ninguna barra de desplazamiento.
white-space: nowrap; No se tiene en cuenta los espacios en blanco ni los saltos de línea originales para que el contenido desborde la caja.