Como ocultar a barra horizontal (Scroll) com CSS
Postado por: Pedro Rogério emIsso 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.
Random Posts
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 também escreve para o CSS no Lanche, blog voltado ao desenvolvimento front-end.
“H”orizontal
Horizontal…
Erar e Hunano gente … valeu pela dica =)
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!!!
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!!!
É que o H do meu teclado falhou e eu nem vi, desculpa aí galera!!!
Essa propriedade é ótima, mas tenta fazer isso no IE7, faça uns testes… e veja como a Microsoft consegue “melhorar” seus produtos…
Valeu Pedro.
Estava com essa barra aparecendo só no IE 7 de um site que estou desenvolvendo. Agora o problema foi resolvido!
valeu
Vlw…. acabei de solucionar um problema!
Caraca maluco! Genial!
Valeu pela dica!
Realmente útil, em ultimos casos. Sempre é bom averiguar o porque esta acontecendo isso.
Se nao tiver outro jeito, manda bala ^^
No meu caso, parece que no site que testei não funcionou.
http://valedoloire.com/main/capa/default.aspx
@Tiago,
Ué, aqui pra mim está normal!!!
Foi um erro meu.
É num frame que criamos para não puxar as urls das páginas.
Procurei isso durante anos AHUAUHHAUHUA
TUDO DE BOM PRA VOCÊ
té
Muito bom, Adorei!
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
Cara vc é d+!
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
Firmeza irmão!!!
simplesmente o máximo!!!
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…
Descobri… É só colocar overflow-x no html em vez de no body (No caso do IE 7).
html{ overflow-x:hidden;}
Valeu.
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
Desculpa SAM, não tinha visto seu comentário. É isso mesmo
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…
Vou testar. Espero que funcione no FF.
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!!
Vlw Lucas Aziz….
Show de bola a dica….
Assim tambem funciona:
iframe {
overflow-x: hidden;
overflow-y: scroll;
}
Maravilha!! Simples e resolve.
Valeu Pedro!
Abraço