CSS: overflow:scroll Barras de desplazamiento, aprende a usarlas

El overflow:scroll es una regla en CSS que te permite incluir un contenido cuyo ancho supera al espacio asignado, y va mostrar una barra de desplazamiento ya sea en uno o ambos lados para el desplazamiento vertical y horizontal. El overflow: scroll Si le indicamos la propiedad Scroll esta hará que el contenido que supera al espacio asignado quedará oculto, esto quiere decir que la capa mantendrá su tamaño prefijado y podremos verlo, ya que le indicamos que nos añada las Barras de Desplazamiento (scroll) esto nos permite trasladarnos por el contenido sin que se pierda por estar oculto, y desplace los elementos y los ubique por encima de otros. Esta propiedad tiene una desventaja que son las Barras de Desplazamiento  ya que van a estar visibles siempre, así no haya contenido en la capa. Se puede forzar el scroll hacia uno de los lados, por altura o anchura overflow-y:scroll”, “overflow-x:scroll”.
En este guia te enseñaremos la manera de implementarla.

1. Con overflow:scroll y ambas barras presentes:
Esta función básica solo con el parámetro overflow:scroll; se asigna al estilo de nuestro objeto contenedor, explicar los principales defectos, abajo mostramos 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 l La implementación de scroll en overflow, no luce muy bien porque muestra ambas barras.

Al usar el parámetro scroll incluye que si el contenido se sale su contenedor en el ancho o el alto, en este caso 200px y 100px respectivamente, será 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.

De esta forma verán que una de las dos barras, la horizontal, aparece inactiva, esto es a causa que el valor width en CSS es muy fundamental y el texto de por sí no tiene un valor de ancho, por lo que será recortado. Si deseamos que aparezca una barra desplazadora horizontal tendremos que 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:

De esta manera habremos forzado a aparecer la línea vertical y horizontal.

La barra vertical se desactiva, pero para esto debemos introducir más texto.

Ya teniendo un ancho fijo al objeto contenido, la barra horizontal es forzada a activarse.

2. Solamente la barra vertical u horizontal
No todas las veces requerimos que ambas barras estén presentes, inclusive una barra desactivada puede dar un resultado poco estético, tendremos dos parámetros que reparan este asunto, "overflow-x" y "overflow-y" los valores de esto parámetros son hidden (oculto), visible (visible) y auto (aparece solamente si el contenido excede el contenedor)..

Se puede colocar en la misma instrucción ambos parámetros, por ejemplo:

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

Enseñará la barra de desplazamiento vertical (eje Y) y se ocultará la horizontal (eje X), no será necesario colocar ambas, solo la que queremos mostrar, a menor que haya un problema de herencia con otras reglas CSS asignadas.

a. Barra vertical: "overflow-y:visible;" y "overflow-y:auto;"
se puede usar overflow-y:visible; u overflow-y:auto; para el mismo propósito ambos únicamente aparecerán cuando excede 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;"
SSe usara igual como en el anterior caso pero como vimos al principio, se necesita un elemento que desborde el ancho como un div o una imagen, de otra forma 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 alguna razon u otra quieren ocultar una de las barra solo basta con poner el parámetro hidden como se dijo en el punto dos.

Búsquedas relacionadas: Qué es Overflow en CSS, overflow: scroll en CSS: Barra de desplazamiento, como usar barras de desplazamiento en CSS, aprende a usar barras de desplazamiento overflow:scroll.

Espero que te haya gustado este post CSS: overflow:scroll Barras de desplazamiento, aprende a usarlas | Geektation, no te olvides de apóyarnos haciendo un clic en me gusta, un tweet, ó dejando un comentario.