domingo, 10 de março de 2013

CSS - Dica para barra de rolagem sempre vísivel



















Olá amigos, bom dia! Mas um domingo e eu aqui postando uma dica bem legal sobre CSS.

Eu já tive esse problema, e como tudo na vida da gente, é errando e quebrando a cabeça que se aprende, achei legal compartilhar isso com vocês. Essa dica, essencialmente é para quem esta iniciando com CSS que vai pegar esse "problema" em breve.

Quando desenvolvemos um site e centralizamos ele na tela, o navegador calcula automaticamente a sobra que tem de haver nos dois lados, para que realmente fique centralizado em qualquer resolução de monitor. Acontece que quando a página é grande o navegador é obrigado a criar a barra de rolagem, fazendo assim que o esqueleto da página seja modificado entre páginas que tem rolagem e que não tem rolagem.

É uma "pequena" mudança, mas além de mudar a disposição visual, na transição da página, aos olhos do usuário parece que muda muita coisa, quando na verdade a única coisa que se altera são as margens da direita e esquerda.

Uma solução que encontrei foi a de colocar a barra de rolagem em todas as páginas, ou seja, independente do tamanho da página (pequena ou grande) sempre exibiremos a barra de rolagem e isso não deixará nunca que seja redimensionado nenhuma margem.

Esse é um código CSS simples, porém que resolveu o meu problema.

html { overflow-y: scroll; }
html { overflow: -moz-scrollbars-vertical; }
html { overflow-x: auto; }

6 comentários:

  1. Detalhe simples, mas muito importante. Resolveu meu problema.

    Abraço!

    ResponderExcluir
  2. Bacana... Resolveu meu problema também. Não tem coisa pior que mudar de página e o layout mexer...

    ResponderExcluir
  3. Muito bom, simples e funcional!

    ResponderExcluir
  4. Muito bom... resolveu o problema de aparecer rolagem quando o mouse passava sobre alguns elementos e acionava alguns efeitos. A rolagem fazia com que a pagina reajustasse em alguns casos. Manter sempre a barra acabou com o bug.

    ResponderExcluir