Como Esconder a Barra de Rolagem (Scroll) com JQuery


Escondendo a Barra de Rolagem com Jquery

Um script bem simples e bastante útil quando for necessário esconder a barra de rolagem de sites tanto na horizontal como na vertical, está técnica é bem explorada para quem quer construir interfaces onde a navegação seja na mesma página através de um menu que utilize ancora para mudar de posições.

Apesar do site ficar com uma interação diferenciada não esqueça de testar em diversas resoluções de tela para que o usuário do seu site não se sinta prejudicado por não conseguir ver o conteúdo que esteja passando da área visual.

Não existe muito segredo para fazer com que a barra de rolagem se esconda basta utilizar este script para conseguir o efeito.

Dentro da tag body do seu site chame a biblioteca JQuey e adicione o script.





Existe também uma outra forma que no caso acho mais simples e recomendo que é utilizar apenas css para esconder a barra de rolagem, segue

body { overflow-y: hidden; } 


neste caso você poderá utilizar overflow x para esconder a barra horizontal também, algumas pessoas reportam erros no IE7 mas também é simples de resolver basta usar html em vez de body.

html{overflow-y: hidden;}


Caso você queira ver um exemplo, este site funciona com as características citadas no post.

Link do Exemplo

Fácil não!
Até a próxima.





Artigos Relacionados


Designer de Interface pós graduado em Arquitetura da Informação. UI/UX Designer e Front-end Developer, atualmente atendo empresas como freelancer e sou colaborador em uma agência de comunicação onde desenvolvo interfaces criativas com foco na experiência do usuário. Organizador por natureza acredito que o caos é a matéria-prima necessária.

Um comentário em “Como Esconder a Barra de Rolagem (Scroll) com JQuery

  1. Márcio Leandro 15 de dezembro de 2012 23:13

    Olá, legal a dica, mas gostaria de esconder o Scroll porém continuar rolando a página ou o conteúdo da DIV.
    Obrigado!!

Deixe o seu comentário

Seu endereço de email não será publicado.

Você pode usar HTML tags e atributos: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>