Cuando uno trabaja con ciertos proyectos "especiales" (como una aplicación web para una intranet o similares) o cuando simplemente el diseño lo requiere, hay veces que es necesario ocultar las barras de desplazamiento del navegador, ya sea horizontal, vertical o ambas.
Para esto se utiliza solo CSS, con la propiedad overflow. Por ejemplo, para ocultar ambas barras se hace lo siguiente.
Código :
html { overflow:hidden; }Barra vertical.
Código :
html { overflow-y:hidden; }Barra horizontal.
Código :
html { overflow-x:hidden; }Actualización:
Hasta donde he probado, ésta técnica funciona en IE 6/win, Opera 9, y Firefox 1.5. Agradeceria que alguien lo pruebe en otros navegadores y plataformas como Mac y Linux.
Algunos han pedido un ejemplo de como implementarlo, asi que aqui les dejo uno muy sencillo.
¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.
Por Ereb el 17 de Julio de 2006
(tambien pude ser yo el que no supo poner el código.... quien sabe)
Alguna idea?
Por XKlibur el 17 de Julio de 2006
Por marc palau el 17 de Julio de 2006
Por DanielHR el 17 de Julio de 2006
Por Juampe el 17 de Julio de 2006
gracias
Por Rene el 17 de Julio de 2006
Código :
html{ overflow:hidden; }No funciona ni en Opera, ni en FF y mucho menos en IE 6. Probé conCódigo :
body{ overflow:hidden; }y funciona en Opera y FF. No pasa nada en IE6. Saludos.Por esigchas el 17 de Julio de 2006
Excelente tip!
Por kofres el 18 de Julio de 2006
Por la_gata el 19 de Julio de 2006
Por jose el 19 de Julio de 2006
Por Alpaca el 28 de Agosto de 2006
Acá les hago un copy/paste de como usé ese código dentro de mi código fuente.
<head>
<title>prueba</title>
<style type="text/css">
<!--
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
html {
overflow: hidden;
}
-->
</style>
</head>
Y sobre el comentario de "la_gata_blog", <body scroll="no"> sólo funciona en IE.
Espero que sea de ayuda.
Por Pitufo el 06 de Septiembre de 2006
También me funciona en Firefox 1.5.0.6
Por Cristián Villagra el 23 de Septiembre de 2006
Igual yo lo puse en
html { overflow:hidden; }
Y no funcionó, pero para asegurarse, es mejor ponerlo en los 2.
Jeje.
body { overflow:hidden; }
html { overflow:hidden; }
Bueno, gracias por el dato. Justo lo que necesitaba para páginas FLASH con Scrollers dentro de las películas.
Por Julio González Seara el 29 de Septiembre de 2006
overflow-y:auto;
overflow-x: hidden;
en un DIV y cuando el contenido no desborda el tamaño del div, lo que hace es ocultar todo el contenido.
Por Andoni el 17 de Noviembre de 2006
Y funciona a la perfeccion!
Por nahiko el 15 de Diciembre de 2006
Barras de desplazamiento
El atributo SCROLL establece o recupera un valor que indica si las barras de desplazamiento del elemento se han activado o no. En Internet Explorer 6 Public Preview o versión posterior, al utilizar la declaración !DOCTYPE para activar el modo de compatibilidad con estándares, este atributo se aplica al documento HTML. Al desactivar este modo, al igual que en las versiones anteriores de Internet Explorer, este atributo se aplica al elemento BODY, no a HTML.
Nota Los atributos overflow, overflow-x y overflow-y, que se pueden utilizar para administrar el contenido que supera el tamaño de su contenedor, se aplican al elemento HTML cuando está activado el modo de compatibilidad con estándares.
http://www.microsoft.com/spanish/msdn/articulos/archivo/060701/voices/cssenhancements.asp
http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/overflowX.asp
http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/overflowY.asp
Parece ser que no solo para todo el body o documento, sino también para div y span. Yo aun no me lo he leido , pero pinta bien
Slaudos!!
nahiko_blog :
Claro, overflow es una propiedad css y puede ser agregada a cualquier elemento tipo bloque. Saludos
Por Harold Fritz Pinto el 05 de Enero de 2007
overflow: scroll;
overflow-x:hidden;
Sólo quería que desapareciera el scroll horizontal.
Por Erwin el 12 de Enero de 2007
Por boss_h el 10 de Febrero de 2007
¿Cómo hago para hacer scroll en el texto de la capa, pero sin que aparezca la barrita de desplazamiento?. Quiero hacer algo parecido a lo que aparece en esta página: http://www.csszengarden.com/tr/espanol/?cssfile=/202/202.css&page=0
Si os desplazáis hacia abajo, veréis que va apareciendo el texto en el fondo del escenario.
Salu2.
Por Johnny el 10 de Febrero de 2007
A mí lo que me ha interesado más es la aplicación a IE, lo he estado viendo en los links de nahiko y hay una cosilla que no me queda clara, se aplica tal cual viene en la página, es decir:
Código :
{ overflow-y : sOverflow } [ sOverflow = ] object.style.overflowYO cómo va eso?? Es que justo ahora estoy con un proyecto que requiere usar un scroll en Y para una div, y sería interesante poder adaptarlo para que funcione correctamente en IE con los condicionales.
Bueno, si álguien lo sabe que postee, yo lo voy a investigar un poco más y si doy con la forma de implementarlo correctamente lo pongo también.
Saludos
Por Dertggi el 11 de Abril de 2007
"Dertggi Maria Garcia Urdaneta"
Por Sicachá el 16 de Abril de 2007
<style type="text/css">
<!--
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
html {
overflow: hidden;
}
-->
</style>
en el archivo donde va el texto (ojo la tabla no puede superar ó ser igual al tamaño del espacio donde va el iframe por que de lo contrario necesitará el scrollbar...
Por Joel Cristobal el 19 de Abril de 2007
eso es todo
Saludos
Joel Cristobal_blog :
Por ernesto ramos el 03 de Mayo de 2007