Como ocultar a barra horizontal (Scroll) com CSS
Postado em: 15 de maio de 2007 por Pedro RogérioIsso já deve ter acontecido com muita gente quando está desenvolvendo um site, mas aqui você encontra a solução para isso, sabe quando você implementa um layout e, você não sabe de onde, do nada aparece uma barra de rolagem horizontal no seu site, você já fuçou em tudo, na div que contém o site, está tudo com as medidas corretas, mas mesmo assim ainda não encontrou a solução, o layout está perfeito, mas a única coisa que está estragando alí é aquela barra de rolagem horizontal, existe uma solução muito simples para isso, que descobri aqui, basta definir no CSS, mas exatamente no body, o seguinte:
body { overflow-x: hidden; }
Simplesmente isso irá esconder a sua barra de rolagem horizontal, não é a melhor solução, mas só a utilize em último caso.
Se tiver um tempo, leiam também:
Sobre Pedro Rogério
Pedro Rogério é desenvolvedor web por paixão, não saberia fazer melhor outra coisa. Além de escrever para o Pinceladas da Web é proprietário do blog CSS no Lanche, blog voltado ao desenvolvimento front-end.
Guilherme Bortoli disse: 15.05.07 ás 07:35
“H”orizontal
Lari disse: 15.05.07 ás 08:51
Horizontal…
Guilherme Veras disse: 15.05.07 ás 09:15
Erar e Hunano gente … valeu pela dica =)
Marcio Carvalho disse: 15.05.07 ás 12:27
Cara …
Tive este problema ha algum tempo atraz … tinha um iframe dentro de um DIV … e a barra horozontal so saiu quando eu coloquei:
*/
/*
vai entrender!!!
Marcio Carvalho disse: 15.05.07 ás 12:28
Cara …
Tive este problema ha algum tempo atraz … tinha um iframe dentro de um DIV … e a barra horozontal so saiu quando eu coloquei:
div style=”position:absolute; left:212px; top:107px; height:438px; width:573px; overflow-y:hidden;”
iframe width=”573″ height=”438″ frameborder=”0″ src=”paginas/visaogeral.htm” name=”FrameMain” scrolling=”yes”
/iFrame
/div
vai entender!!!
Pedro Rogério disse: 15.05.07 ás 14:00
É que o H do meu teclado falhou e eu nem vi, desculpa aí galera!!!
William Grasel Martins disse: 15.05.07 ás 14:00
Essa propriedade é ótima, mas tenta fazer isso no IE7, faça uns testes… e veja como a Microsoft consegue “melhorar” seus produtos…
Camilo disse: 15.05.07 ás 14:12
Valeu Pedro.
Estava com essa barra aparecendo só no IE 7 de um site que estou desenvolvendo. Agora o problema foi resolvido!
valeu
Diogo disse: 25.05.07 ás 10:47
Vlw…. acabei de solucionar um problema!
Tilon Ferreira disse: 27.05.07 ás 02:35
Caraca maluco! Genial!
Lawton Ferreira disse: 04.06.07 ás 12:07
Valeu pela dica!
Renato Rix disse: 09.06.07 ás 14:32
Realmente útil, em ultimos casos. Sempre é bom averiguar o porque esta acontecendo isso.
Se nao tiver outro jeito, manda bala ^^
Tiago Celestino disse: 12.06.07 ás 11:20
No meu caso, parece que no site que testei não funcionou.
http://valedoloire.com/main/capa/default.aspx
Pedro Rogério disse: 12.06.07 ás 21:14
@Tiago,
Ué, aqui pra mim está normal!!!
Tiago Celestino disse: 13.06.07 ás 09:31
Foi um erro meu.
É num frame que criamos para não puxar as urls das páginas.
Hugo disse: 22.06.07 ás 14:36
Procurei isso durante anos AHUAUHHAUHUA
TUDO DE BOM PRA VOCÊ
té
faculdade teologica disse: 24.06.07 ás 23:39
Muito bom, Adorei!
edmar pita disse: 28.06.07 ás 12:45
estou criando um novo layourt pro meu site e me debati com a barra de rolagem horizontal e este simples codigo melhorou meu site:
body { overflow-x: hidden; }
este eh o codigo em css jah q eu estava usando css na barra de rolagem, só foi add este codigo!
vlw
Cursos de Teologia disse: 20.07.07 ás 11:15
Cara vc é d+!
Rodrigo disse: 17.10.07 ás 01:57
Estava a algum tempo procurando esta solução e como vc compartilhou com o MUNDO eu encontrei 5 meses depois (17/10/07) de sua publicação!
Continue assim!
Sucesso!
Rodrigo
Faculdade das Assembleias de Deus disse: 05.11.07 ás 12:54
Firmeza irmão!!!
Faculdade Teologica disse: 10.12.07 ás 22:39
simplesmente o máximo!!!
sam disse: 04.01.08 ás 02:14
Cara..! O IE ocupa o maior percentual do mercado e esse negôcio não funciona no dito cujo. Foi boa a iniciativa, porém, não serviu.
Valeu…
sam disse: 04.01.08 ás 03:51
Descobri… É só colocar overflow-x no html em vez de no body (No caso do IE 7).
html{ overflow-x:hidden;}
Valeu.
Lucas Aziz disse: 08.01.08 ás 19:53
Para resolver isso no IE7 você precisa colocar essa propriedade na tag “html”e não na tag “body”. Exemplo:
html{overflow-x: hidden; overflow-y: auto;}
(para o css)
ou para os grosseiros que colocam direto no código:
Isso irá funcionar em qualquer browser.
Abraços,
Lucas Aziz
Lucas Aziz disse: 08.01.08 ás 19:54
Desculpa SAM, não tinha visto seu comentário. É isso mesmo
Daniel disse: 03.04.08 ás 17:42
Haha,tempa fazer isso e testa no Opera,se funcionar eu te dou meu p*l para voce ch***r.
Funciona – FireFox / Internet Hororozo ops Explorer/Netscape (Não testei);mais ouvi falar que funciona.
Não Funciona – Opera (Não suporta overflow)… / IE 5.0 e abaixo. / Netscape “4″ abaixo…
gadarf disse: 23.04.08 ás 19:13
Vou testar. Espero que funcione no FF.
Fabricio Oliveira disse: 15.10.08 ás 15:01
Eu tava com esse problema no IE 6, só consegui resolver colocando no CSS na tag HTML.
Ficando assim:
html { overflow-x: hidden; overflow-y: auto; }
Só avisando q esse código invalida o CSS pela W3C.
Mas resolve!!
Débora disse: 06.02.09 ás 23:09
Vlw Lucas Aziz….
Show de bola a dica….