Generando un Scroll con hojas de estilo

24.10.2005

Generando un Scroll con hojas de estilo

Por Federico Elgarte | 35,614 Lecturas
Archivado en: CSS

CSS nos brinda varias propiedades útiles al momento de controlar nuestras capas. La propiedad Overflow es capaz de generar un scroll cuando el contenido excede sus límites de ancho y alto.

En esta oportunidad les enseñaré la propiedad Overflow de CSS capaz de generar un scroll cuando el contenido dentro de un elemento excede las propiedades de su ancho y su alto.

Podemos usar la propiedad Overflow si queremos tener un mayor control sobre nuestras capas.

Para que Overflow funcione correctamente hay que definir las siguientes propiedades:

Background
Width
Height
Overflow
Visible (opciona)
Hidden (opcional)
Auto (opcional)
Inherit (opcional)

Para generar un scroll en cualquier parte del texto puedes copiar el siguiente ejemplo:

<html>
  <head>
  <style  type="text/css">
  div {background: white;  width:200px; height:100px; overflow: scroll}
  </style>
  </head>
  <body>

  <div>Aquí me pongo a cantar al compás de la  vigüela, que el hombre que lo desvela una pena estrordinaria, como la ave  solitaria con el cantar se consuela.<br>José  Hernández<br><u>El gaucho Martín Fierro</u></div>

  </body>
  </html>

Un ejemplo del anterior código es el que se utiliza en nuestro editorial para mostrar códigos HTML o de programación.

Califica esta nota:

(6 votos, promedio: 4.33 de 5)

Loading ...

Sobre el autor

Federico Elgarte
Webmaster de cssboulevar.com.ar

Comentarios

17 comentarios en total.

leoj90 31.10.2005 - 15:38 - #

Está bueno eso, pero que es mejor así o con textarea’s ? :pensando:
Trulala de cordoba 03.11.2005 - 13:45 - #

Que bueno, justo yo ahora tengo que muestrar un listado de rubros que llevan campos check y estaba pensando ponerlo en un frame pero ahora que veo esto lo implemente en una página para un cliente y queda hermoso.
Gracias.!!!!
Abner Trujillo 08.12.2005 - 12:41 - #

Esto del Overflow me suena bueno ya que se hace mas facil visualizar cierto contenido en una area especifica
titojorgiyo 04.02.2006 - 03:05 - #

Me gusta el sistema pero me sobra la barra de scroll horizontal
¿hay forma de hacerla desaparecer?

Gracias
titojorgiyo 06.02.2006 - 02:38 - #

Ya he encontrado la solución.
Para quien le sirva:
donde pone overfolw: scroll poner overflow: auto y solo paracerá la barra de scroll necesaria para visulaizar todo el texto.

Un saludo
Gerardo 25.05.2006 - 09:52 - #

Estimado titojorgiyo, ocupa la propiedad “overflow-y:scroll”
Greco 26.05.2006 - 19:16 - #

en respuesta a titojorgiyo…
si se puede eliminar la barra horizontal, solo tienes que cambiar donde dice…

overflow: scroll

y tendrias que poner asi…

overflow: auto

yo lo probe y si me funciono.

Espero haber sido de ayuda.
Dan 12.06.2006 - 12:05 - #

Igual exelente sistema pero me queda de más la barra horizontal

que hago? porfa
Dan 12.06.2006 - 12:21 - #

Perdón tenía un estorbo en la programación funciona exelente en mac y pc con la opción auto

mil gracias
mike de benkio 19.07.2006 - 18:01 - #

esta excelente
gracias
Unmito 06.09.2006 - 10:52 - #

Como se le aplican estilos a un scroll que pertenece a una capa
y no al body? me refiero a colores del scroll, tamaños, color del arrow, etc…
tumerotata 26.10.2006 - 16:34 - #

Dan: en lugar de usar:

overflow: scroll

usa

overflow: auto

Asi, las barras aparecen solo si el contenido sobrepasa el limite.

// http://www.sistemasaereos.com //
visita 02.11.2006 - 11:35 - #

sirve el ejemplo
No Registrado 02.11.2006 - 11:36 - #

visita;1763050, sirve el ejemplo

tienes razon …muy buena
Tremps 08.10.2007 - 02:36 - #

Con la propiedad overflow: scroll; me aparecen unas barras muy feas y no me funciona. quiero algo mas dinamico, no con las tipicas barras de desplazamiento y que funcione sin tener que pinchar en ningun sitio , solo con acercar el raton.
Alguna idea?
Polles 13.12.2007 - 13:52 - #

Tremps… Para eso podrias usar flash.

¿ hay alguna forma de cambiar la imagen de la flecha ?
¿ Tengo un tema en firefox y al ver la pagina me sale el scroll del firefox.?
¿ hay alguna posibilidad de cambiar el color de la flecha cuando la cliquee ?
Polles 13.12.2007 - 13:53 - #

si alguien me responde porfavor avisenme al correo.
polles@gmail.com
GRACIAS!