lunes, 13 de junio de 2011

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.

Comentarios y Consultas

Los mensajes serán revisados a veces. No te olvides que soy una persona, no se trata de faltar al respeto, todos tenemos opiniones, no hay que enojarse.

Puedes marcar Notificarme para recibir la notificación de la respuesta.

28 comentarios:

  1. Gracias es lo que estaba buscando...
    Claro y conciso...

    ResponderBorrar
  2. Buenas, me gustaría saber cómo puedo acortar el tamaño de la barra de scroll, ya que aparece del mismo tamaño que el div que la contiene, y eso dificulta e incomoda el desplazamiento.

    Muchas gracas

    ResponderBorrar
    Respuestas
    1. Pues usa margin o padding para dar un espacio de separación sería lo más lógico.

      Borrar
    2. puedes dar un ejemplo de como acortar la barra de scroll

      Borrar
  3. Clarísimo y completo. Un diez.

    ResponderBorrar
  4. Muy buen post, pero tengo una pregunta, como se podria hacer para q la barra de desplazamiento se ubicara en la parte de arriba y al lado izquierdo?, ya no del modo tradicional:derecha y abajo

    Gracias por su respuesta

    ResponderBorrar
  5. como puedo mantener la barra dedesplazamiento siempre abajo

    ResponderBorrar
  6. Hola. Muy bueno el post. Estaba buscando información para un diseño en el que desde la home se podría desplazar hacia los dos lados (izq y der) y desde cada nueva pantalla se debería poder desplazar hacia arriba y abajo. Espero que se pueda entender, por las dudas graficaría de esta forma: un cuadrado dividido en 5 cuadros horizontales y 5 verticales. El "home" sería el número 3 de la línea 3 y se debería poder deslizar hacia los cuadros a la izquierda o derecha y desde ellos hacia arriba o abajo.
    ¿Se podría hacer con esta forma o conviene usar otros elementos ? Gracias por la ayuda si es posible. Saludos,

    ResponderBorrar
    Respuestas
    1. ¿Quieres decir dar un clic y desplazarte a cualquiera de los cuadros como una ancla?

      Borrar
  7. Si. Creo que esa sería la descripción.

    ResponderBorrar
    Respuestas
    1. Pues de que se puede se puede solo pones un ancla a la posición a la que te quieres desplazar y pones un enlace, aunque las anclas necesitan un espacio de texto definido para funcionar.

      Nunca he intentado algo parecido, pero puedes experimentar, no tengo idea de como se comporte el overflow bajo esas condiciones, pero en tanto el contenedor que los envuelve sea uno, lo que metas dentro no importa.

      Para anclas.
      http://www.bufoland.cl/cursoweb/html/anclas.php

      Borrar
  8. Gracias, Matius. Lo probaré y te comentaré el resultado.
    Saludos,

    ResponderBorrar
  9. Gracias, increíblemente útil. Lo he empleado para ocultar una barra que me estaba volviendo loco. Muy buen hidden!

    ResponderBorrar
  10. Hola, Me vino estupendo, es lo que buscaba. Lo instalé en esta web www.pelig.es, pero no consigo que el scroll o la barra se vea en una pantalla móvil, sabes cómo tengo que hacer para que se vea en el movil o en las tablatas?. Gracias

    ResponderBorrar
    Respuestas
    1. El overflow en las tabletas lo haces con los dedos, no hay barras de desplazamiento "ni para la páginas", pero depende del navegador. Es un problema del navegador en sí, no de CSS, podrías poner una indicación visual.

      Borrar
  11. Genial! muy pero muy buen post, me sirvió una barbaridad, es lo que me estaba trabando con mi página web, muchísimas gracias, de verdad, muchas gracias.

    ResponderBorrar
  12. Hola buenos dias!, muy bueno el post. Quería saber si hay alguna propiedad dentro del "div" que permita mostrar la ultima linea de un texto mostrado con "overflow" ?, GRACIAS....

    ResponderBorrar
    Respuestas
    1. Eso sería con alguna función de ancla, pero desde mi punto de vista eso solamente se puede hacer con Javascript y no solamente con CSS

      Borrar
  13. Tengo una web simple con overflow:scroll, sin embargo no funciona en todos los navegadores de igual forma, en chrome lo hace perfecto, pero en firefox y en explorer los toma de distinta forma. ¿Como puedo lograr que se visualice igual en TODOS los navegadores?

    Gracias y saludos!

    ResponderBorrar
    Respuestas
    1. Yo pienso que deberías hacer una página web en blanco y probarla en varios navegadores porque overflow está soportada en los tres navegadores más importantes desde sus primeras versiones.

      Tal vez sea algun problema con tus CSS.

      Una solución para problemas entre definiciones de padding y margin no establecidas o con diferentes resultados en firefox-chrome, etcétera, porcentajes, etcétera es usar Normalize.css: https://necolas.github.io/normalize.css/

      Borrar
  14. Me podrian ayudar.
    Quiero colocar el plugin de los comentarios de facebook en mi pagina. Lo quiero poner en un div que tenga un altura determinada y que cuando se vean todos los comentarios >10 la altura sea igual.

    Si alguin pudiera ayudarme se lo agradeceria.

    ResponderBorrar
  15. muchisimas gracias te pasaste estabamos largo tiempo buscadno

    ResponderBorrar

El ascenso de Skywalker(2019)

Joker 2019Una película que ha roto a divido a los fans muchos culparán a sus director por querer reparar Los últimos Jedi, no es su culpa al final.

[Leer artículo...]

La Espada del Inmortal (2019

Blade of The Immortal (2019)La historia de Manji, un guerrero samurái sin señor que ha sido condenado con la inmortalidad...

[Leer artículo...]

Kemono Michi: Rise Up (2019)

Kemono Michi: Rise Up (2019)Del autor de Konosuba, Genzo Shibata es un luchador japonés que es transportado a un mundo de fantasía, quien está obsesionado con los seres peludos.

[Leer artículo...]

ELI (2019)de Netflix

ELI (2019)de Netflix Reseña y criticaPelícula lanzada directo a video que nos cuenta una historia que parecería sacada de la Dimensión desconocida.

[Leer artículo...]

  © Cgnauta | CGsign blog | [Ver Licencia de uso] | Matius Lenin, Creative Commons, algunos derechos reservados

Regresar ARRIBA  

Vistas desde Mayo 2009

▼/▲ Archivo del Blog

Visitas totales

Información

IBSN: Internet Blog Serial Number 01-77-94-2008

Esta plantilla es creada y diseñada por Matius Lenin para CGnauta blog. Con Scripts de JQuery bajo licencia GNU/GPL. CGnauta es una marca registrada propiedad de Matius Lenin.