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 son moderados serán revisados antes de publicarse.

Este no es un foro de adolescentes, no uses letras en vez de palabras completas como "q" en vez de "que", ni escribas tus mensajes en mayúsculas, se respetuoso con los demás, si no estás de acuerdo no comentes.

Una cosa es que no te guste una crítica, otra que uses un lenguaje inapropiado para demostrarlo. No me siento en la obligación de publicar ningún mensaje en específico o de leerlo entero si usas palabras altisonantes.

28 comentarios:

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

    ResponderEliminar
  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

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

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

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

    ResponderEliminar
  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

    ResponderEliminar
  5. Buen artículo. Saludos

    ResponderEliminar
  6. como puedo mantener la barra dedesplazamiento siempre abajo

    ResponderEliminar
    Respuestas
    1. No comprendo la pregunta, ¿puedes ser más específico?

      Eliminar
  7. 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,

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

      Eliminar
  8. Si. Creo que esa sería la descripción.

    ResponderEliminar
    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

      Eliminar
  9. Gracias, Matius. Lo probaré y te comentaré el resultado.
    Saludos,

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

    ResponderEliminar
  11. 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

    ResponderEliminar
    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.

      Eliminar
  12. 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.

    ResponderEliminar
  13. Excelente aporte!!! (Y)

    ResponderEliminar
  14. 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....

    ResponderEliminar
    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

      Eliminar
  15. Respuestas
    1. Será mejor que aprendas un poco sobre HTML primero y CSS

      Eliminar
  16. 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!

    ResponderEliminar
    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/

      Eliminar
  17. 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.

    ResponderEliminar
  18. muchisimas gracias te pasaste estabamos largo tiempo buscadno

    ResponderEliminar

Samurai Jack (2017), episodio 10 "Final"

Samurai Jack (2017)Jack se enfrenta por fin con Aku, todos tratan de ayudar al samurai y la sorpresa vendrá del pasado.

[Leer artículo...]

Noragami entra en paro indefinido

Noragami es suspendida temporalmenteUna de las autoras no puede continuar con su trabajo al frente del manga y se ha decidido meter la historia en hiatus, lo que puede significar...

[Leer artículo...]

Tales of Zestiria y su final Yuri

El final de Tales the Zestiria The XLas aventuras de Sorey llega a su fin con un final de lo más raro que he visto hasta ahora.

[Leer artículo...]

Warau Salesman New (2017) El vendedor sonriente

Warau Salesman New (2017) EstrenosSatoru descubre al culpable de la trama, es el momento de enfrentarse y tendrá que dar todo de sí para cambiar su suerte.

[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.

Anexos

Bitacoras.com