Generando un Scroll con hojas de estilo
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.
Está bueno eso, pero que es mejor así o con textarea’s ? :pensando:
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.!!!!
Esto del Overflow me suena bueno ya que se hace mas facil visualizar cierto contenido en una area especifica
Me gusta el sistema pero me sobra la barra de scroll horizontal
¿hay forma de hacerla desaparecer?
Gracias
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
Estimado titojorgiyo, ocupa la propiedad “overflow-y:scroll”
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.
Igual exelente sistema pero me queda de más la barra horizontal
que hago? porfa
Perdón tenía un estorbo en la programación funciona exelente en mac y pc con la opción auto
mil gracias
esta excelente
gracias
Como se le aplican estilos a un scroll que pertenece a una capa
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 //
sirve el ejemplo
tienes razon …muy buena
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?
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 ?
si alguien me responde porfavor avisenme al correo.
[email protected]
GRACIAS!
Me encanta tu nombre polles, casi podrias ponerte come-pollas
estoy utilizando un scroll en el área donde listo mis datos pero una vez que ingreso más de 7 registros o algo asi… ya no lista más. Sé que el problema es el scroll. ¿Cómo puedo solucionarlo?
Buen material broder!…
[…] el uso de las hojas de estilos es posible lograr un funcionamiento similar de manera que los enlaces sean amigables a los motores […]
Hola!
Me habéis salvado la vida con esta maravilla del scroll, pero quería saber si hay alguna forma de cambiar el formato del propio scroll, en vez de azul gris por ejemplo, o que sea más sencillo por ejemplo…
Gracias!
A ver si madura imbecil de mierda……..
se agradece bastante che! Yo necesitaba mostrar un datagrid con los registros de una tabla (mysql), los cuales eran muy numerosos. Y en su parte superior mantener fijo unos botones de ABM.
Slutes!