Como ocultar a barra horizontal (Scroll) com CSS

Postado por: Pedro Rogério em

Isso 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.

Posts Relacionados

Confira também outros artigos interessantes postados aqui no blog.

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.

32 Responses to “Como ocultar a barra horizontal (Scroll) com CSS”

  1. Lari

    Horizontal…

  2. Erar e Hunano gente … valeu pela dica =)

  3. 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!!!

  4. 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!!!

  5. É que o H do meu teclado falhou e eu nem vi, desculpa aí galera!!!

  6. Essa propriedade é ótima, mas tenta fazer isso no IE7, faça uns testes… e veja como a Microsoft consegue “melhorar” seus produtos…

  7. Valeu Pedro.

    Estava com essa barra aparecendo só no IE 7 de um site que estou desenvolvendo. Agora o problema foi resolvido!

    valeu

  8. Diogo

    Vlw…. acabei de solucionar um problema!

  9. Renato Rix

    Realmente útil, em ultimos casos. Sempre é bom averiguar o porque esta acontecendo isso.

    Se nao tiver outro jeito, manda bala ^^

  10. No meu caso, parece que no site que testei não funcionou.

    http://valedoloire.com/main/capa/default.aspx

  11. @Tiago,

    Ué, aqui pra mim está normal!!!

  12. Foi um erro meu. :P É num frame que criamos para não puxar as urls das páginas.

  13. Procurei isso durante anos AHUAUHHAUHUA
    TUDO DE BOM PRA VOCÊ

  14. 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

  15. Rodrigo

    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

  16. sam

    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…

  17. sam

    Descobri… É só colocar overflow-x no html em vez de no body (No caso do IE 7).

    html{ overflow-x:hidden;}

    Valeu.

  18. Lucas Aziz

    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

  19. Lucas Aziz

    Desculpa SAM, não tinha visto seu comentário. É isso mesmo ;)

  20. Daniel

    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…

  21. Vou testar. Espero que funcione no FF.

  22. 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!!

  23. Débora

    Vlw Lucas Aziz….

    Show de bola a dica….

  24. Rodrigo Brito Alves

    Assim tambem funciona:

    iframe {
    overflow-x: hidden;
    overflow-y: scroll;
    }

  25. Sandro Malk

    Maravilha!! Simples e resolve.
    Valeu Pedro!
    Abraço

Leave a Reply