Logotipo Design Interativo

Como Esconder a Barra de Rolagem (Scroll) 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.

Comentários
  1. 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!

publicidade
publicidade
publicidade

Design Tools

Links

Conheça sites sobre ux, design, front-end, comunicação, inspiração e muito mais, fique por dentro das novidades do mercado com nossa lista.


Profissionais Influentes

Conheça os profissionais que influenciam e trabalham para a comunidade de design e fron-end e user experience, confira o Twitter de cada um.


Curta nossa fanpage e fique por dentro das novidades do site
publicidade
publicidade
publicidade