overflow:scroll en CSS: Barras de desplazamiento, aprendiendo sus secretos

El overflow:scroll es una regla de CSS que nos permite contener un contenido cuyo ancho supere el espacio asignado para el mismos y que aprecezca una barra de desplazamiento en uno o ambos lados para el desplazamiento vertical y horizontal.

En este tutorial aprenderemos la manera correcta de implementarla.

1. Con overflow:scroll y ambas barras presentes:
Esta es la función básica solamente con el parámetro overflow:scroll; asignado al estilo de nuestro objeto contenedor, explicando su principales defectos, más abajo veremos como ocultar una de las barras.

Ejemplo básico:
"overflow:scroll;"

<div style="overflow:scroll;height:100px;width:200px;">
-- contenido --
</div>

Resultado:

Este es el ejemplo básico de la implementacion de scroll en overflow, como veran no es muy bonito porque muestra ambas barras.

El uso del parámetro scroll implica que si un contenido desborda su contenedor en el ancho o el alto, para este caso 200px y 100px respectivamente, este sea recortado.

Evidentemente aparecerán ambas barras de desplazamiento, sin embargo, si solamente ponen texto este se va a recortar, pues no es un elemento que desborde el ancho.

Se darán cuenta que una de las dos barras, la horizontal, aparece inactiva, esto se debe a que el valor width en CSS es muy importante y el texto por si mismo ni tiene un valor de ancho, por lo que será recortado. Si queremos que aparezca una barra desplazadora horizontal deberemos envolverla en un div con un ancho superior al ancho del contenedor por ejemplo 300px.

Ejemplo:

<div style="overflow:scroll;height:100px;width:200px;">
  <div style="width:300px;">
        -- contenido --
  </div>
</div>

Resultado:

Ahora hemos obligado a que aparezca la linea vertical y la horizontal.

La barra vertical se desactiva, pero es cuestión de meter más texto.

Al tener un ancho fijo al objeto contenido, la barra horizontal es forzada a activarse.

2. Solamente la barra vertical u horizontal
Pero no siempre necesitamos que ambas barras estén presentes, incluso una barra desactivada puede dar un resultado estético indeseable, así que tenemos dos parámetros que solucionan este problema, "overflow-x" y "overflow-y" los valores de esto parámetros son hidden (oculto), visible (visible) y auto (aparece solamente si el contenido desborda el contenedor).

Podemos poner en la misma instrucción ambos parámetros, por ejemplo:

style="overflow-y:visible;overflow-x:hidden;"

Mostrará la barra de desplazamiento vertical (eje Y) y se ocultará la horizontal (eje X), desde luego que no es necesario poner ambas, solamente la que quedamos mostrar, a menor que haya un problema de herencia con otras reglas CSS asignadas.

a. Barra vertical: "overflow-y:visible;" y "overflow-y:auto;"
Podemos usar overflow-y:visible; u overflow-y:auto; para el mismo propósito ambos únicamente aparecerán cuando se desborde el espacio vertical.

Ejemplo:

<div style="height: 100px;width: 200px; overflow-y: auto; ">
-- contenido --
</div>

Esto es un texto muy largo pero gracias a overflow-y:scroll solamente aparece la barra vertical.

auto o visible dan el mismo resultado.

b. Barra horizontal: "overflow-x: visible;" y "overflow-y: auto;"
Se usa exactamente igual que con el anterior caso sin embargo, como vimos al principio, necesitamos un elemento que desborde a ancho como un div o una imagen, de otra manera el texto será recortado y esta barra aparecerá desactivada.

Ejemplo:

<div style="border:2px solid #000; height: 100px;width: 200px; overflow-x: auto; ">
<div style="width:300px;">
-- contenido --
<div>
</div>

Este texto está dentro de una cada de div de 300px de ancho. Lo que obliga a aparecer la barra desplazadora con "overflow-x".

c. Ocultar una barra
Si por una u otra desean ocultar una de las barra recuerden poner el parámetro hidden como se dijo en el punto dos.