06.01.2025

Como Mover a Barra de Rolagem no CSS Sem JavaScript: Dicas

Resposta Rápida

Se você deseja controlar o deslocamento da rolagem usando CSS, utilize a propriedade scroll-margin. Isso se aplica aos elementos na página cuja posição precisa ser ajustada durante a rolagem:

.elemento {
  scroll-margin-top: 20px; /* Garante um deslocamento confortável a partir do topo durante a rolagem */
}

Com esta propriedade, você pode ajustar o elemento para que ele fique na posição desejada ao rolar.

Movendo a Barra de Rolagem da Direita para a Esquerda

Quer mover a barra de rolagem do lado direito da tela para o lado esquerdo? Use a propriedade direction do CSS e a barra de rolagem mudará de lado:

.container {
  /* Move a barra de rolagem para o lado esquerdo */
  direction: rtl;
}

Invertendo Elementos da Página

Pensando em inverter os elementos da página? Conheça a propriedade transform, que permite alcançar esse efeito:

.container {
  transform: rotate(180deg); /* Move a barra de rolagem para o topo da página */
  overflow: hidden; /* Oculta a visibilidade da rolagem normal */
}
.inner {
  /* Retorna o conteúdo para sua posição original */
  transform: rotate(-180deg); 
}

Ajustando Tamanhos de Elementos

Alterar a largura e a altura do contêiner pode indicar o lugar ideal para a barra de rolagem, mas lembre-se de que o design geral da página não deve ser comprometido.

Visualização

Pense na sua barra de rolagem como uma obra de arte em uma galeria que precisa da posição certa para atrair a atenção dos visitantes. O CSS permite um posicionamento preciso:

.galeria .scrollbar-masterpiece {
  position: absolute;
  right: 10px;    /* Posiciona a barra de rolagem horizontalmente à direita */
  top: 50px;      /* e verticalmente a partir do topo */
}

Como resultado, a barra de rolagem ocupará exatamente a posição que você designou para ela.

Técnicas Avançadas de Barra de Rolagem

Gerenciando o Overflow de Conteúdo

A propriedade overflow ajuda a controlar como o conteúdo é exibido em direções horizontal e vertical:

.conteiner-rolavel {
  /* Adiciona uma barra de rolagem horizontal se necessário */
  overflow-x: auto;

  /* Bloqueia a rolagem vertical */
  overflow-y: hidden;
}

Alinhamento Preciso de Elementos

As margens e os preenchimentos são úteis para ajustar a posição do contêiner:

.conteiner-rolavel {
  margin: 0 auto; /* Centraliza o contêiner */
  padding: 10px; /* Adiciona espaço extra */
}

Rotacionando em Torno do Seu Eixo

A propriedade transform permite que o conteúdo gire, o que é especialmente útil para a rolagem horizontal de conteúdo orientado verticalmente:

.conteudo-vertical {
  /* Prepara para a rolagem horizontal girando o conteúdo */
  transform: rotate(-90deg);
}

Mudando a Direção do Texto e da Rolagem

O atributo dir controla a direção do texto e da rolagem:

<div dir="rtl">
  <!-- Texto e rolagem da direita para a esquerda -->
</div>

Elementos aninhados podem ter a direção oposta:

<div dir="rtl">
  <div dir="ltr">
    <!-- Rolagem da esquerda para a direita para o elemento interior -->
  </div>
</div>

Estilizando a Barra de Rolagem

Precisa mudar o estilo da barra de rolagem? Use o pseudo-elemento ::webkit-scrollbar para este propósito:

/* Mudando o estilo da barra de rolagem */
::-webkit-scrollbar {
  width: 10px;
}

Considerando a Compatibilidade entre Navegadores

Não se esqueça da compatibilidade entre navegadores: nem todas as propriedades CSS que afetam o comportamento da barra de rolagem são suportadas de forma uniforme em todos os navegadores. Para garantir a compatibilidade, utilize ferramentas como o autoprefixer.

Recursos Úteis

1. O Estado Atual da Estilização de Barras de Rolagem no CSS (Atualização 2022) | CSS-Tricks — Um guia completo para estilizar barras de rolagem.
2. Cor da Barra de Rolagem - CSS | MDN — Dicas úteis sobre a propriedade scrollbar-color do MDN.
3. Largura da Barra de Rolagem - CSS | MDN — Um guia sobre a propriedade scrollbar-width.
4. Como Criar uma Barra de Rolagem Personalizada — Um guia prático sobre como criar um design personalizado para a barra de rolagem.
5. Ocultar a Barra de Rolagem, Mas Manter a Rolagem - Stack Overflow — Como ocultar a barra de rolagem sem perder a capacidade de usá-la.
6. Módulo de Barras de Rolagem CSS Nível 1 — Documentação do W3C sobre estilização de barras de rolagem.

Video

Navigation