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.
No funciona en el explorer ni en netscape alguna solucion a ello Por:DanielHR_blog
funciona en el firefox de linux gracias Por:Juampe_blog
overflow-x:hidden; overflow-y:hidden; solo funcionan en firefox y este si es para todos html { overflow:hidden; } Por:Rene_blog
Si coloco:
Código :
html{ overflow:hidden; }
No funciona ni en Opera, ni en FF y mucho menos en IE 6. Probé con
Código :
body{ overflow:hidden; }
y funciona en Opera y FF. No pasa nada en IE6. Saludos. Por:dave73
Al igual que NEO_JP yo también probé en F1.5, en IE6 y en Opera 9.
Excelente tip!
Por:esigchas_blog
Buen dato NEO_JP , lo probe en FF IE6 y Opera 9 y si funciona Por:kofres_blog
la =^,^=...(permiso...pero no entendí por qué hay que usar eso, si el tag body tiene un parámetro que inhibe las barras y es asi: <body scroll="no">....es decir, para qué usar css? o no entendí de qué se trata?) Por:la_gata_blog
esta en lab D Por:jose_blog
Al principio me costó un poco, pero terminó funcionandome bien. Lo he probado exitosamente en IE (Windows), Firefox (Mac y Windows) y Safari (Mac).
Acá les hago un copy/paste de como usé ese código dentro de mi código fuente.
Y sobre el comentario de "la_gata_blog", <body scroll="no"> sólo funciona en IE.
Espero que sea de ayuda. Por:Alpaca_blog
A mi sí me funciona "body {overflow:hidden}" en Internet Explorer 6 (con el SP1, que eso igual influye)... si pongo "html {overflow:hidden}" me falla.
También me funciona en Firefox 1.5.0.6 Por:Pitufo_blog
Buen dato. 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:Cristián Villagra_blog
overflow-x y overflow-y en FireFox funcionan correctamente si el contenido provoca el desbordamiento. Sin embargo yo he probado
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:Julio González Seara_blog
Pues no se como lo debeis hacer... porque a mi me ha funcionado simplemente insertandolo en la primera linea del archivo css, tal y como NEOJP ...
Y funciona a la perfeccion! Por:Andoni_blog
Internet Explorer?
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.
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!! Por:nahiko_blog
nahiko_blog :
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
Claro, overflow es una propiedad css y puede ser agregada a cualquier elemento tipo bloque. Saludos Por:NEO_JP
Yo lo hice dentro de un DIV y funcionó correctamente en IE6 y FF. El código era:
overflow: scroll; overflow-x:hidden;
Sólo quería que desapareciera el scroll horizontal. Por:Harold Fritz Pinto_blog
estoy trabajando en un sitio en el cual quiero que se muestre siempre el escroll vertical, aunque el contenido sea pequeño. Por:Erwin_blog
Hoooola, tengo una preguntilla (sobre Scroll, cómo no jeje). El tema es que quiero hacer scroll en una capa, y quiero ocultar esa barrita tan fea de scroll... pero si pongo overflow:hidden desaparece la barra de desplazamiento, pero ya no me hace ningún scroll. Entonces mi pregunta es: ¿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:boss_hunter
Buen tip neo, seguro que le ayuda a muchos. 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:
O 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:Johnny
esi no es lo q yo estoy buscando coloque barra de desplazamiento vertical y horizontal gracias
"Dertggi Maria Garcia Urdaneta" Por:Dertggi_blog
para todos aquellos que quizas tengan el mismo problema que tuve, cuando uno hace una página con iframes donde cada vinculo simpre lo abre en el mismo espacio, la solución es:
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:Sicachá_blog
Facil para que no salga el scroll solo tienen que poner este pequeño frace dentro del comando BODY <body scroll=no> eso es todo
Saludos Por:Joel Cristobal_blog
Joel Cristobal_blog :
Facil para que no salga el scroll solo tienen que poner este pequeño frace dentro del comando BODY <body scroll=no>
¿Vives en el mundo feliz de Internet Explorer, no? Sigue siendo feliz. Por:Freddie
habrá un código CSS que desintale el internet explorer el PC y reemplace por otro navegador que sea mucho mejor?? ES APOCALIPSIS IE, Por:ernesto ramos_blog
ni en netscape alguna solucion a ello
